Vue.js list not updating despite array change via assignment

Question

I'm new to vue.js but I'm trying to display a list of options from an underlying array. However, when the underlying array is changed the list does not update/re-render. I am assigning the new array directly to the vue instance data value (not using splice or assigning via index) and in the console if I try and print out the underlying data (vm.clarifyings) that is updated, it is just the re-rendering that is not working. Even using vm.clarifyings.push(object) does not update the view in the browser.

Vue instance code:

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,
    },

Relevant method update:

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;
      }
  }

All of this executes normally it is simply the re-rendering that isn't working. If I specify the array when I initialize the Vue instance it renders properly it simply does not update.

HTML code:

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

Where are you using fetch? And why you didn't set it in created hook? — Asimple
– Asimple, Commented May 26, 2020 at 22:01

tony19 · Accepted Answer · 2022-07-15 02:50:42Z

4

Vuejs has a bad reactivity for arrays. See the official doc : https://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays

Vue cannot detect the following changes to an array:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue

When you modify the length of the array, e.g. vm.items.length = newLength

You can use Vue.set(vm.clarifyings, indexOfItem, newValue) to overcome this problem. (Instead of vm.clarifyings.push(object))

edited Jul 15, 2022 at 2:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 26, 2020 at 22:08

BTL

4,7243 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

raafi15 · Accepted Answer · 2020-05-31 15:09:30Z

0

The problem appeared to be a result of interference with bootstrap-selectpicker, it was fixed by using nextTick functionality in vue like so:

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

answered May 31, 2020 at 15:09

raafi15

211 silver badge4 bronze badges

Collectives™ on Stack Overflow

Vue.js list not updating despite array change via assignment

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related