Блог

Главная - Вопросы по программированию - Как использовать Vue.js методы для задания свойств данных

Как использовать Vue.js методы для задания свойств данных

#javascript #vue.js

#javascript #vue.js

Вопрос:

Я новичок в Vue.js и пытается отобразить данные, которые запрашиваются с сервера. Я создал новое приложение Vue и определил метод:

 methods: {
  getData: function() {
    // making a request, parsing the response and pushing it to the array.
    console.log(arr);
    return arr;
    }
  }

Метод работает нормально, и я могу записать массив в консоль одним нажатием кнопки.

 <button v-on:click="getData">Get me some data</button>

Однако я не уверен, как на самом деле использовать этот массив в приложении. Я хотел бы сохранить его в свойстве, а затем отобразить его для пользователя. Сначала я думал, что я мог бы использовать вычисляемые свойства, подобные этому:

 computed: {
  values: function() {
    return this.getData;
  }
}

… и отображать его пользователю с for помощью цикла:

 <p v-for="value in values">{{ value }}></p>

По крайней мере, это решение не дало желаемого результата. Я, вероятно, неправильно понял здесь некоторую логику Vue.

Ответ №1:

Вам нужно использовать свойство data.

 data() {
   return {
       values: []
   }
},

methods: {
   getData: function() {
       this.values = arr;
   }
}

И зацикливание значений

Комментарии:

1. Спасибо, это работает, и я вижу из консоли, что values массив обновляется соответствующим образом. Однако, похоже, что Vue не может обнаружить эти изменения в массиве, и выбранные значения не отображаются во внешнем интерфейсе (просто отображается начальный пустой массив). Есть идеи по этому поводу?

2. Вы уверены, что присвоили извлеченные данные значениям?

3. Да, я изменил логику следующим образом. « data() { return { values: [] } }, методы: { getData: function() { this.values = arr; console.log(this.values); // Я вижу полученные данные на консоли. } } «` Я думаю, что проблема в том, что мое приложение не перерисовывает HTML-документ при values обновлении массива. <p v-for="value in values">{{ value }}></p> Это просто отображение исходного массива, а не обновленного.

4. Отладка заняла некоторое время, но проблема была в области видимости. this.values = arr; console.log(this.values); Это работало нормально в области действия функции, но this не относилось к массиву, о котором я думал. Необходимо добавить const self = this; на глобальном уровне. Это было трудно заметить, но сейчас работает нормально.l