Vue如果满足条件但不显示结果

Question

我有一个 v-if，如果条件为真，它应该显示一些其他 vue 元素

<template v-if="$store.state.Zell_Open[$store.state.PAGENUMBER]===true">

我的状态：

Zell_Open: [false],
PAGENUMBER: 0

当我将 Zell_Open 更改为 true 时，应该显示的组件不会显示，它只会在我手动更改 PAGENUMBER 状态（通过 Vue 开发工具）上下一次，然后应该显示的组件时显示显示出来了。

我尝试将此用作解决方法，并尝试在 Zell_open 状态更新时将 PAGENUMBER 状态向上和向下更改，但这也不起作用，它仅在使用开发工具时有效。

我也尝试在 v-div 中使用 v-show 而不是 v.if，但这也导致了同样的问题。

编辑： 我尝试使用计算变量，我尝试使用 getter 而不是直接使用状态，但我仍然遇到同样的问题

澄清： 我刚用的时候效果很好

<template v-if="$store.state.Zell_Open===true">

那是在 Zell_Open 状态是一个数组之前，它在那里工作。 所以我认为[$store.state.PAGENUMBER] 是造成问题的原因。

Answer 1

在您的商店突变中尝试 Vue.set：

https://vuejs.org/v2/api/#Vue-set

并且绝对将“ $store.state.Zell_Open[$store.state.PAGENUMBER] === true ”移动到计算属性中。这样，您的模板将保持干净的任何逻辑。

Answer 2

您必须在 Vuex 存储中创建一个 getter，然后在组件上创建一个计算属性并像 Vue 数据一样观察它，或者您可以使用 Vuex 观察器对更改做出反应。 Vuex 提供了一个类似于 Vue 的观察者方法 Vuex watcher method，您可以使用它来观察变化。

this.$store.watch(
  (state)=>{
    return this.$store.getters.your_getter
  },
  (val)=>{
   //something changed do something

  },
  {
    deep:true // when you have to watch arrays or objects
  }
  );