Vue updates all button text after changing specific button

Question

Hi everyone I'm playing around with Vue JS but for some how I cannot get what I expected. Below are my code.

Template

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center" v-for="x in count" :key="x">
      <v-menu offset-y>
        <v-btn
          slot="activator"
          color="primary"
          dark
        >
          {{name}}
        </v-btn>
        <v-list>
          <v-list-tile
            v-for="(item, index) in items"
            :key="index"
            @click="test(item.title)"
          >
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>

Vue

new Vue({
  el: '#app',
  data: () => ({
    name: 'default',
    items: [
      { title: 'Click Me 1' },
      { title: 'Click Me 2' },
      { title: 'Click Me 3' },
      { title: 'Click Me 2' }
    ],
    count: 10
  }),
  methods: {
    test(title) {
      this.name = title
    }
  }
})

What I want is that when I change a specific button text the other buttons should not be affected. But it seems my code is doing the opposite. What am I missing here? Any help, explanation would be much appreciated. Thanks

new Vue({
  el: '#app',
  data: () => ({
    name: 'default',
    items: [
      { title: 'Click Me 1' },
      { title: 'Click Me 2' },
      { title: 'Click Me 3' },
      { title: 'Click Me 2' }
    ],
    count: 10
  }),
  methods: {
    test(title) {
      this.name = title
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.3/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.3/dist/vuetify.min.css">


<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center" v-for="x in count" :key="x">
      <v-menu offset-y>
        <v-btn
          slot="activator"
          color="primary"
          dark
        >
          {{name}}
        </v-btn>
        <v-list>
          <v-list-tile
            v-for="(item, index) in items"
            :key="index"
            @click="test(item.title)"
          >
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>

Answer 1

You are iterating over a normal number, in your example 10, so you are just showing 10 times the same variable name. If you now change that variable name to something, it will change in all the buttons accordingly.

You need some way to save the different names, e.g. an array of objects like your items with all the titles.

I took your code and changed it a bit. Instead of iterating over a fixed count, I created an array of names and iterate over that array. When you click one of the buttons and change the text, instead of just changing the universal name attribute - you change the name at the position in the array.

new Vue({
  el: '#app',
  data: () => ({
    names: [
{name: 'default 1'}, {name: 'default 2'}, {name: 'default 3'}, {name: 'default 4'}],
    items: [
      { title: 'Click Me 1' },
      { title: 'Click Me 2' },
      { title: 'Click Me 3' },
      { title: 'Click Me 4' }
    ],
  }),
  methods: {
    test(title, index) {
      this.names[index].name = title
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.3/vuetify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.3/vuetify.css.map">


<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center" v-for="(x, index) in names" :key="'name' + index">
      <v-menu offset-y>
        <v-btn
          slot="activator"
          color="primary"
          dark
        >
          {{x.name}}
        </v-btn>
        <v-list>
          <v-list-tile
            v-for="(item, i) in items"
            :key="'item' + i"
            @click="test(item.title, index)"
          >
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>