Estoy luchando por actualizar la interpolación de la thing . Esta función simple debería cambiar el valor de los datos, pero en cambio no hace nada. Chrome registra el cambio de cosa en la consola pero el HTML no se actualiza.
<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>Intente actualizar su propiedad de datos en lugar de devolver:
dropSelect(thing: any) { this.thing = thing },Una pequeña observación : use this.thing = thing en lugar de return this.thing
demostración :
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>