具有动态添加属性的v模型

时间:2016-10-10 22:26:12

标签: vue.js

我已将应用程序从Vue 1迁移到Vue 2,并且对于来自对象的已添加属性的数据存在问题。

我正在浏览我的数据:

`<template v-for="(treatments, yard) in groupByYard">`

并进一步向下:

`<tr v-for="treatment in treatments">`

groupByYard是一个计算值:

`groupByYard: function() {
        var result = {};
        var treatments = this.treatments;
        for (var i = 0; i < treatments.length; i++) {
            var treatment = treatments[i];
            var yard = treatment.yard.name;
            this.$set(treatment, 'completed_date', null);
            if (result[yard]) {
                result[yard].push(treatment);
            } else {
                result[yard] = [treatment];
            }
        }
        return result;
    }`

我正在添加 completed_date 属性     this.$set(treatment, 'completed_date', null)

这样可以设置属性,但我无法使用v-model访问/更改此属性:

`<input class="form-control datepicker"
v-model="treatment.completed_date"
data-date-format="dd-mm-yyyy"
data-date-end-date="0d"
placeholder="dd-mm-yyyy"
type="text"  />`

1 个答案:

答案 0 :(得分:0)

您不应该在此使用this.$set,而应将completed_date的值设置如下

this.treatment.completed_date = null

这样您就可以访问该属性v-model