Search code examples
vue.jselement-uiv-model

vue2 + element ui - how to setting dynamic v-model


Let's make the string(categoryV3) an array with ',' and create array length. and icon-add click add ..

but v-model not working.. and i don't know add .........

I am not good at speaking English.

Please give me your opinion.

<template>
    <el-table
      :data="tableData"
    >
      <el-table-column type="selection" width="55" align="center"> </el-table-column>
      <el-table-column props="category" label="category" show-overflow-tooltip>
        <template slot-scope="{row}">
          <div v-for="(item, index) in generateArray(row.categoryV3)" :key="index">
            <el-select class="filter-item select1" filterable v-model="item[index]" placeholder="-">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="`${item.value}. ${item.label}`"
                :value="item.value"
              />
            </el-select>
            <span class="tmp-icon icon-add"><i class="el-icon-circle-plus-outline"></i></span>
            <span class="tmp-icon icon-remove" v-show="generateArray(row.categoryV3).length > 1"
              ><i class="el-icon-remove-outline"></i
            ></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
     tableData: [{
          categoryV3:"option1,option2"
        }, {
          categoryV3:""
        }],
     options: [{
          value: 'Option1',
          label: 'Option1'
        }, {
          value: 'Option2',
          label: 'Option2'
        }]
    };
  },
  methods: {
    generateArray(val) {
      return val.split(',');
    },
  }
};
</script>

Solution

  • data add 'categoryV3: []'
    
     <div v-for="(item, index) in categoryV3[scope.$index]" :key="index">
                <el-select class="filter-item select1" filterable v-model="categoryV3[scope.$index][index]" placeholder="-">
                  <el-option
                    v-for="item in relationCode"
                    :key="item.code_value"
                    :label="`${item.code_value}. ${item.code_name}`"
                    :value="item.code_value"
                  />
                </el-select>
    
                <span class="tmp-icon icon-add" @click="addModel(categoryV3[scope.$index], '')"
                  ><i class="el-icon-circle-plus-outline"></i
                ></span>
                <span
                  class="tmp-icon icon-remove"
                  @click="removeModel(categoryV3[scope.$index], index)"
                  v-show="categoryV3[scope.$index].length > 1"
                  ><i class="el-icon-remove-outline"></i
                ></span>
              </div>