Question

我是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>

Answer 1

Vuejs对数组的反应性很差。请参阅官方文档：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)）

Answer 2

该问题似乎是由于干扰了bootstrap-selectpicker的结果，已通过在vue中使用nextTick功能解决了该问题，

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

尽管通过分配更改了数组，但Vue.js列表未更新

2 个答案: