Объект v-for в объектах не рендерится при изменении this.objects - PullRequest
Новая
       10

Объект v-for в объектах не рендерится при изменении this.objects

0 голосов
/ 16 октября 2019

У меня есть 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()
                }
            }
        });

1 Ответ

2 голосов
/ 16 октября 2019

Я думаю, что вы потеряли свой 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), используйте функции стрелок, чтобы ваш контекст оставался верным

...