javascript - 当 this.objects 更改时，对象中的 v-for 对象不会重新渲染

Question

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

<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 的现代构建链)，请使用箭头函数，这样你的上下文就保持正确