0

我正在使用 Quasar 框架中的 Vue.js 开发一个混合应用程序。有一次，我有一个有点大的表单，我将它拆分为子组件来处理输入部分，并且我通过 .sync 修饰符使用双向绑定（https://vuejs.org/v2/guide/ components.html#sync-Modifier，在 Vue 2.3.0+ 中可用）来处理数据。然后我使用计算属性来获取和设置父级中的每个值。例如：

parent: 
//html template
<parent>
  <child :firstName.sync="required.firstName"></child>
</parent>

child: 
//js
computed {
  sync_firstName: {
    get () {
      return this.firstName
    },
    set (val) {
      this.$emit('update:firstName', val)
     }
   }
 }

当我硬编码 v-model 指令时，这很有效，如<input type=“text” v-model=“sync_firstName”/>. 但是，当我使用 v-for 指令（使用 :key 并动态呈现 :options）分配 v-model 属性时，会读取模型值但未访问/评估计算属性，例如：

<div v-for=“option in data>
  <q-select v-model=“data[’name’]” :options=“data.options"></q-select>
</div>

根据 v-model 的 eslint 插件指南（https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-model.md），可以使用 v -for 建立 v-model 属性。在我的例子中，渲染数据{{ data.name }}显示了正确的值（sync_firstName）——但是这个属性没有被评估（尽管选项值被正确地渲染）。但是，如果我对计算属性进行硬编码<q-select v-model=“sync_firstName”&gt;</q-select>，则该字段会完美呈现。我错过了什么？

谢谢！

4

0 回答 0