[Vuejs]-How to switch between passing different props to a vue component?

by

0👍

Remove the this from this.name since you are passing the value as a param into the method.

methods: {
    select: function(name) {
      this.selectedData = name;
    }
  }

I would also suggest you to convert the 3 different names into and array and use the v-for helper to render the buttons.

Example:

data() {
  names: ["John", "Alice", "Eric"]
}

The button:

<button v-for="name in names" :key="name" @click="select(name)">{{name}}</button>

0👍

While you could do it that way, you also have other options that would work well, depending on your project needs. They are all valid ways to achieve what you want.
You can use vuex to manage your states and you can also use events. To use events, 

<button name="data1" @click="select(name)">data1</button>

methods:{
    select(name){
          this.$emit('click-event', name)
    }
}

And in your child component you can listen for this event;

<listening-component @click-event='doSomething'></listening-component>

Then write the doSomething method to achieve what you want.

Leave a comment