如何通过onclick方法更新Vue插值？点击后视图未更新问题排查

dropSelect方法未对响应式属性this.thing执行赋值操作，仅做了参数打印和返回当前属性值的操作，data中的thing始终为初始值"A"，无法触发视图更新。

修改方法逻辑，将传入的参数赋值给this.thing即可，不需要额外返回值：

<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);
      this.thing = thing;
    },
  },
});
</script>

修改后点击按钮，thing的值会被更新为传入的"B"，模板插值会同步刷新。

内容的提问来源于stack exchange，提问作者robinvr