v-如果在事件总线事件后没有更新

Question

您好，我遇到了 v-if 的问题，它在收到 eventbus 事件后没有更新。这是我的代码：

<template>
  <div class="main">
      <button  v-if="inCreationMode()">
        Make a new snippet
      </button>
      <button v-if="mode ==='edit'">Push edits</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mode: "creation",
    };
  },
  created() {
    this.emitter.on("editSnippet", snippet => function(snippet){
      this.mode = "edit";
    });
  },
};
</script>

我尝试用函数替换 v-if 条件：

    <template>
      <div class="main">
          <button  v-if="inCreationMode()">
            Make a new snippet
          </button>
          <button v-if="inEditMode()">Push edits</button>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          mode: "creation",
        };
      },
      created() {
        this.emitter.on("editSnippet", snippet => function(snippet){
          this.mode = "edit";
        });
      },
      methods:{
      inCreationMode() {
      return this.mode === "creation";
        },
       inEditMode(){
          return this.mode ==="edit";
         }
      }
    };
    </script>

我也尝试过使用 this.$forceUpdate()。有谁知道这个问题的解决方案。提前致谢。

Answer 1

在这种情况下，您应该使用计算属性而不是方法：

   <template>
      <div class="main">
          <button @click="  inCreationMode() " v-if="inCreationMode">
            Make a new snippet
          </button>
          <button v-if="inEditMode">Push edits</button>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          mode: "creation",
        };
      },
      created() {
        this.emitter.on("editSnippet", snippet => function(snippet){
          this.mode = "edit";
        });
      },
      computed:{
      inCreationMode() {
      return this.mode === "creation";
        },
       inEditMode(){
          return this.mode ==="edit";
         }
      }
    };
    </script>

注意：从 v-if 值

中删除 ()

Answer 2

我在这里看到很多问题，这可能都是它无法正常工作的部分原因。鉴于您已将发射器定义为 new Vue()，并将其正确添加到 Vue 原型，并且发射事件的组件通过 this.emitter.emit('editSnippet') 完成。你必须：

替换

this.emitter.on("editSnippet", snippet => function(snippet){ this.mode = "edit"; });

和

this.emitter.on("editSnippet", () => { this.mode = "edit";});

原因：

你必须使用箭头函数，否则this将不会引用你的组件。
你的回调应该是一个“做某事”的函数，而不是returns一个函数（不会被调用）

进一步改进（可选）：

使用计算道具而不是其他答案中描述的方法
使用 this.emitter.off... 清理 beforeUnmount（或 beforeDestroy）中的监听器。实际上不是可选的，不这样做至少是非常糟糕的代码风格

v-如果在事件总线事件后没有更新

v-if not updating after eventbus event

dom

event-bus

vue.js