Question

这让我发疯。使用v-model的Dom不会使用对象属性进行更新，但Vue devtools会更新正确。

我从某个地方了解到这可能需要Vue.$set，这在v-for次迭代中似乎是不可能的。

<el-tab-pane v-for="(item, index) in onShelveForm.data" :key="item.id" :label="item.name">
  <div class="form-block" v-for="formItem in formStructure">
    <el-form-item
    :prop="'data.' + index + '.' + formItem.id"
    :label="formItem.name">

      <el-select
        v-model="item[formItem.id]"
        readonly="false">
        <el-option v-for="option in formItem.value.regex"
          :label="option"
          :value="option"></el-option>
      </el-select>

    ...

当我点击某个选项时，选择器不会显示新值，但Vue devtool会做出正确的反应。

如果Vue.$set可以保存此内容，我将如何在v-for中使用它？

Answer 1

如果您可以提供一个jsfiddle，可能更容易理解v-model无效的原因。

有一些可能性，例如在创建实例时对象不存在。

最简单的方法可能是通过添加@change='Vue.$forceUpdate()'来强制更新，但这更像是一个黑客攻击而不是解决方案。 v-model应该有效

<el-select
    @change='Vue.$forceUpdate()'
    v-model="item[formItem.id]"
    readonly="false">
    <el-option v-for="option in formItem.value.regex"
      :label="option"
      :value="option"></el-option>
</el-select>

Vue.js - 在对象属性更新后更新dom

1 个答案: