vue.js - 具有计算属性问题的 el-form 模型绑定

Question

我有一个关于 el-form 模型绑定的问题。

  <el-form label-position="left" label-width="170px" :model="filters" ref="filtersForm">
           <el-form-item label="TC Name" prop="tc_name">
             <el-input autocomplete="off" v-model="filters.tc_name"></el-input>
           </el-form-item>
           <el-form-item label="TC Type" prop="tc_type">
             <el-select placeholder="--Select--" v-model="filters.tc_type" multiple>
               <el-option v-for="(value, name) in tcTypeList" :label="value" :value="name"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="Version" prop="version">
             <el-select placeholder="--Select--" v-model="filters.version" multiple>
               <el-option v-for="(value, name) in db2VersionList" :label="value" :value="name"></el-option>
             </el-select>
           </el-form-item>
</el-form>

下面是相应的计算属性：

  computed: {
     filters: {
        get: function () {
          console.log('~~~~~~~~~get fileters')
          return this.$store.state.filters
        },
        set: function (value) {
          console.log('~~~~~~~~~~~~~~~~~filters', value)
          this.$store.commit('setFilters', value)
        }
      }
  }

商店中的过滤器是一个对象，如下所示：

filters: {
      tc_name: '',
      tc_type: [],
      version: []   
    },

我想当我更改表单中的某些值时，应该调用过滤器的 set 函数。我认为该模型是双向的。并且应该调用 set 方法。请帮忙。谢谢！！！！

我已经在数据中对其进行了测试，如下所示：

data () {
      return {
        filters : {
          tc_name: '',
          tc_type: [],
          version: [] 
        }
      }
    },

当我更改表单中的值时效果很好，过滤器对象发生了变化。

标签： vue.jselement-ui