Vue interpolation and methods issue

The following code does not update the interpolation on click. It will console log the change but nothing else. What am I doing wrong?

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

vincent15000

4 years ago

Level 63

Well ... you have to assign the new value to the thing data.

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

1 like

robinvr

4 years ago

Level 1

@vincent15000 Thanks! Why does return not work?

1 like

vincent15000

4 years ago

Level 63

@robinvr Return doesn't work here because the only thing it does is to return a value. This can be useful in another situation, for example :

$my_value = dropSelect(thing: any);

HeYou should learn the basics of programming ;).

Do you need anything else ?

Please or to participate in this conversation.