How do you update a vue interpolation using an onclick method?-CodePudding

I am struggling to update the interpolation of thing. This simple function should change the value of the data but instead does nothing. Chrome logs the change of thing in the console but the HTML does not update.

<template>
  <div >
    <button  @click="dropSelect('B')">
      {{ thing }}
    </button>
  </div>

</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      thing: "A",
    };
  },

  methods: {
    dropSelect(thing: any) {
      console.log(thing);
      return this.thing;
    },
  },
});
</script>

CodePudding user response：

Try to update your data property instead of returning:

dropSelect(thing: any) {
  this.thing = thing
},

CodePudding user response：

One small observation : Use this.thing = thing instead of return this.thing

Demo :

new Vue({
  el: '#app',
  data: {
    thing: "A"
  },
  methods: {
    dropSelect(thing) {
      this.thing = thing;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="dropSelect('B')">
      {{ thing }}
    </button>
</div>