Javascript Vue.js列表未更新，尽管通过分配更改了阵列

我是vue.js的新手，但我正在尝试显示底层数组中的选项列表。但是，更改基础数组时，列表不会更新/重新渲染。我将新阵列直接分配给vue实例数据值（不使用拼接或通过索引分配），并且在控制台中，如果我尝试打印更新的基础数据（

vm.clarifyings

），则只是重新渲染不起作用。即使使用

vm.clarifyings.push（对象）

也不会更新浏览器中的视图

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>

$[question.id$]-$[question.name$]

Vuejs对阵列的反应性较差。见官方文件：

Vue无法检测阵列的以下更改：

• 直接使用索引设置项目时，例如

  vm.items[indexOfItem]=newValue

• 修改数组长度时，例如

  vm.items.length=newLength

---

您可以使用

Vue.set（vm.clarifyings、indexOfItem、newValue）

来解决此问题。（而不是

vm.clarifyings.push（object）

）

Vuejs对阵列的反应性很差。见官方文件：

Vue无法检测阵列的以下更改：

• 直接使用索引设置项目时，例如

  vm.items[indexOfItem]=newValue

• 修改数组长度时，例如

  vm.items.length=newLength

---

您可以使用

Vue.set（vm.clarifyings、indexOfItem、newValue）

来解决此问题。（而不是

vm.clarifyings.push（object）

）

问题似乎是由于干扰了引导选择器，通过在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中使用nextTick功能修复了该问题，如下所示：

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

---

你在哪里用fetch？为什么不在

created

hook中设置它？在哪里使用fetch？为什么你没有在

created

hook中设置它呢？效果很好！谢谢你，工作很有魅力！非常感谢。