v-for object in objects 在 this.objects 改变时不会重新渲染

Question

我有一个 mounted() 带有 reloadComparisons() 和这个标签：

<li v-for="comparison in comparisons">C: [[ comparison.area ]]</li>

问题是只有在 data 中定义了 comparisons 时才会渲染，当我加载新数组时，它不起作用。

我已经试过了 Vue.set(this.comparisons,comparisons) 但它也没有反应。

你知道要做什么吗？

编辑

var app = new Vue({
            delimiters: ['[[', ']]'],
            el: '#vue',
            data: {
                comparisons: [{'area': 'xxxx'}],
            },
            mounted() {
                this.reloadComparisons()
            },
            methods: {
                reloadComparisons: function () {
                    console.log('reloadComparisons');
                    axios.get("http://127.0.0.1:8000/alex/api/pricemap_comparisons/").then(function (response) {
                        console.log(response);
                        if (response.status === 200) {
                            this.comparisons = response.data.results;
                            Vue.set(this.comparisons, response.data.results);
                            console.log(this.comparisons);
                        }
                    }).catch()
                }
            }
        });

Answer 1

我认为您失去了 this 上下文。尝试以下操作：

reloadComparisons: function () {
    console.log('reloadComparisons');
    const that = this;                   
  axios.get("http://127.0.0.1:8000/alex/api/pricemap_comparisons/")
    .then(function (response) {
        console.log(response);
        if (response.status === 200) {
           that.comparisons = response.data.results;
           Vue.set(that.comparisons, response.data.results);
           console.log(that.comparisons);
        }
     )}.catch()
   }

甚至更好：如果您使用 webpack（或其他带有 babel 的现代构建链），请使用箭头函数，以便您的上下文保持正确

v-for object in objects 在 this.objects 改变时不会重新渲染

v-for object in objects doesn't rerender when this.objects changes

javascript

vue.js

v-for