v-if not updating after eventbus event

Question

Hi I'm having problems with a v-if that's not updating after receiving an eventbus event. This is my code :

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

I tried replacing the v-if conditions by functions :

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

I tried using this.$forceUpdate() as well. Does anyone know a solution to this problem. Thanks in advance.

Answer 1

You should use computed properties instead of methods in this case :

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

Note : remove the () from the v-if value