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://vuejs.org/v2/guide/reactivity.html#ad以了解问题发生的原因，那就更好了。

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

1 个答案: