Question

我尝试为VUE定义动态变量，然后在v-for中使用它们。当我加载它们工作的页面时，如果它们稍后更改它们的值，则视图中的值不再更改。

VUE

const app = new Vue({
    el: '#mainCreate',
    data: {
        modules : [],
        feature: []
    },
});

我正在使用此函数在feature：

中生成变量

    function creatDataFeatures() {
        $.each(app.modules, function(index,module){
            app.feature[index] = module.features;
        });
    }

所以我在视图中加载它：

<table class="table table-striped mt-3">
   <tbody>
      <tr v-for="feat in feature[index]">
           <td>
              <input type="checkbox" checked>
          </td>
           <td>
              @{{feat.title}}
           </td>
           <td class="text-info">
              @{{feat.price ? '$ '+feat.price : '$ 0'}}
           </td>
        </tr>
   </tbody>
</table>

加载页面时，我正确加载数据，但是如果我然后更改ejm值：feature [index] = [other array]（我将其更改为与起始数据格式相同的数据格式）在视图中不会更改任何内容。解决方案或替代方案会很棒。

Answer 1

app.feature[index] = module.features;行有关数组的Vue限制。

要修复，请使用：

    $.each(app.modules, function(index,module){
        Vue.set(app.feature, index, module.features); // changed this line
    });

请参阅Vue - Array Change Detection - Caveats：

由于JavaScript的限制，Vue 无法检测到以下内容   更改为数组：
直接设置带索引的项目时，例如vm.items[indexOfItem] = newValue

修改数组的长度时，例如： vm.items.length = newLength

为了克服警告1，以下两者都将完成相同的操作   如vm.items[indexOfItem] = newValue，但也会触发状态   反应系统的更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

使用VUE数组生成动态DATA变量

1 个答案: