如何使用 onclick 方法更新 vue 插值？

Question

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 class="container-xl pb-5">
    <button class="mb-2 btn-lg selected-dropdown" @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>

Answer 1

Try to update your data property instead of returning:

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

Answer 2

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>