Vue. js список не обновляется, несмотря на изменение массива посредством присваивания - PullRequest
Новая
       24

Vue. js список не обновляется, несмотря на изменение массива посредством присваивания

0 голосов
/ 27 мая 2020

Я новичок в vue. js, но я пытаюсь отобразить список параметров из базового массива. Однако при изменении базового массива список не обновляется / повторно отображается. Я назначаю новый массив непосредственно значению данных экземпляра vue (без использования сращивания или присвоения по индексу) и в консоли, если я попытаюсь распечатать обновленные базовые данные (vm.clarifyings), это просто повторный рендеринг, который не работает. Даже использование vm.clarifyings.push(object) не приводит к обновлению представления в браузере.

Vue код экземпляра: 

var vm = new Vue({
    delimiters: ['$[', '$]'], //change delimiters to allow django integration
    el: '#vue_app',
    data: {
        title: init_info.title, //page title
        active: 'presentations',
        navClass: 'nav-item nav-link', //necessary for navbar rendering
        features: features,
        question: '',
        response: '',
        feature_id: init_info.opening,
        last_feature: '',
        clarif_id: '',
        clarifyings: [],
        show_clarifying: false,
    },

Соответствующее обновление метода: 

fetch(url)
  .then(response => response.json())
  .then(function (data) {
      // Type out question and response
      typeWriter(data.question, 'question');
      typeWriter(data.answer, 'response');
      // Save selected option and disable previous selected option
      option_disable(vm.last_feature);
      vm.last_feature = option_ref;
      // Show clarifying questions
      vm.clarifyings = data.clarifyings;
      if (vm.clarifyings.length){
          vm.show_clarifying = true;
      }
      else {
          vm.show_clarifying = false;
      }
  }

Все это выполняется нормально, это просто повторный рендеринг, который не работает. Если я укажу массив при инициализации экземпляра Vue, он будет правильно отображаться, он просто не обновится.

HTML код: 

<select class="selectpicker" data-live-search="true" v-model="clarif_id">
        <option v-for="question in clarifyings">$[question.id$] - $[question.name$]</option> 
    </select>

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Vuejs имеет плохую реактивность для массивов. См. Официальный do c: https://vuejs.org/v2/guide/reactivity.html#For -Arrays

Vue не может обнаружить следующие изменения в массиве:

  • Когда вы напрямую устанавливаете элемент с индексом, например vm.items[indexOfItem] = newValue
  • Когда вы изменяете длину массива, например, vm.items.length = newLength

Вы можете использовать Vue.set(vm.clarifyings, indexOfItem, newValue) чтобы преодолеть эту проблему. (Вместо vm.clarifyings.push(object))

0 голосов
/ 31 мая 2020

Проблема возникла из-за вмешательства в bootstrap -selectpicker, она была исправлена ​​с помощью функции nextTick в vue, например: 

 if (feature_asked) {
            vm.clarifyings = data.clarifyings;
            if (vm.clarifyings.length) {
              vm.show_clarifying = true;
              vm.$nextTick(function () {
                $("#clarifying_qs").selectpicker("refresh");
              });
...