Question

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

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

问题在于，仅当在comparisons中定义了data时才会呈现此图像，当我加载新数组时，它不起作用。

我已经尝试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的现代构建链），请使用箭头功能，以使上下文保持正确

当this.objects更改时，对象中的v-for对象不会重新呈现

1 个答案: