当数据来自 ajax 时，Vue 不会更新 DOM

Question

我正在尝试从 ajax 响应向我的视图中添加一些数据。 我正在查看 devTools，看起来我已经更改了所有数据，但在视图中它显示为空值。

JS文件：

var app = new Vue({
el: '#app',
data: {
    versions: [
        {
            name: 'A'
        },
        {
            name: 'B'
        },
        {
            name: 'C'
        }
    ]
},
beforeCreate: function () {
    var self = this;

    axios.get('http://serviceUrl.com')
        .then(function (response) {
            self.parseResponse(response.data);
        })
        .catch(function (error) {
            console.warn(error);
        });

},
methods: {
    addDataToVersion: function (version, propertyName, value) {
        this.versions.forEach(function (element) {
            if (element.name === version) {
                element[propertyName] = value;
            }
        });
    },
    parseResponse: function (data) {
        for (let key in data) {
            let tag = key.split('.')[0];
            let version = key.toString().split('.')[1];
            let quantity = data[key];

            this.addDataToVersion(version, tag, quantity);
        }
    }
}});

这是我的 html 代码片段。 version.name显示良好，但来自 ajax ( version.VIEW, version.CLICK ) 的所有数据都没有显示。 我在检查器中看到它在数据对象的正确位置，所以我确定它在这里

 <div class="columns"> <div v-for="version in versions" class="column is-one-third"> <div class="version-column"> <div class="tags has-addons"> <span class="tag">Version</span> <span class="tag is-primary">{{ version.name }}</span> </div> <p><span class="has-text-weight-semibold">Views:</span> {{ version.VIEW }}</p> <p><span class="has-text-weight-semibold">Conversions:</span> {{ version.CLICK }}</p> <p><span class="has-text-weight-semibold">CR:</span> 100%</p> </div> </div> </div>

Answer 1

您可以使用this.$set来避免反应性问题。

   addDataToVersion: function (version, propertyName, value) {
       var vm = this;
        this.versions.forEach(function (element,index) {
            if (element.name === version) {
                vm.$set(`versions[${index}]`,propertyName, value);
            }
        });
    }

如果您可以阅读https://v2.vuejs.org/v2/guide/reactivity.html#ad以了解您的问题发生的原因，那就更好了。