Vue.js 奇怪的反应问题

Question

我已经无计可施了，我真的需要一些故障排除帮助。

在将代码从我的 master / root App.vue 移动到 Home.vue“查看”文件后，我突然遇到了一些反应性问题。

采用以下App.vue模板语法：

  <div id="app">
    <Header15 />
    <router-view />
    <UtilsBar />
    <Footer15 />
  </div>
</template>

我的 Home.vue 文件中定义的有问题的模板语法片段：

<ul class="filter-list">
  <li class="filter-list__litem" v-for="theme in themeFilterButtons" :key="theme.id">
    <a class="filter-list__link" :class="{ 'on': theme.isActive }" :href="'#'+theme.id" @click.prevent="onFilterSelect('theme', theme.id)">
      {{ theme.isActive }}<br />
      {{ theme.text }}
    </a>
  </li>

themeFilterButtons，是一个对象的计算数组。

computed: {
  themeFilterButtons() {
    return this.filters.themes.map((theme) => {
      return { ...theme, isActive: false };
    });
  }
}

新数组引用了我的过滤器对象中的一个数组（主题）；它在我的数据中是这样定义的：

data() {
  return {
    filters: {
      themes: [
        { id: 113, text: 'First World War' },
        { id: 214, text: 'Second World War' }
      ]
    }
  }
}

点击事件绑定的onFilterSelect方法最终调用了另一个方法filterBtnSelToggle。该方法负责通过切换对象上的 isActive 属性来切换选定的 class (.on)。

为了排除故障，我简化了函数以尝试执行将第一个数组索引上的 isActive 属性设置为 true 的琐碎任务。由于它最初设置为 false，因此单击任何按钮都应将属性更改为 true。无论我如何设置该值，模板视图 (v-for) 都不会更新。我尝试了所有这些，但没有更新标记。

onFilterSelect(cat, id) {
  // Say I wanted to set isActive: true on the first array item.
  this.themeFilterButtons[0].isActive = true; // < Doesn't work.
  this.$set(this.themeFilterButtons[0], 'isActive', true); // < Nope, also doesn't work.
  console.log('this.themeFilterButtons[0].isActive'); // Returns true.
}

我登录到控制台的任何内容 returns 我所期望的，只是模板（标记）内容没有得到更新。

就像我说的，奇怪的是如果我将该逻辑移回主 App.vue 文件，它会继续工作...

非常感谢任何帮助！

Answer 1

您可以尝试使用 getter setter 计算属性.

computed: {
  themeFilterButtons: {
    get () {
      return this.filters.themes.map((theme) => {
        return { ...theme, isActive: false };
      });
    }
    set (val) {
      this.filters = val
    }
  }
}

但是，更好的方法是先在 data 中定义 isActive

Answer 2

在这种情况下，计算属性取决于 this.filters.themes 并且您始终将 isActiv 设置为 false。所以你可以将 themeFilterButtons 设置为数据属性它可以工作

  // delete computed Code block set themeFilterButtons property in data 
  mounted() {
    this.themeFilterButtons = this.filters.themes.map((theme) => {
      return { ...theme, isActive: false };
    });
  },

Vue.js 奇怪的反应问题

Vue.js strange reactivity issue

javascript

vue.js

vue-reactivity