Vue обновляет весь текст кнопки после изменения определенной кнопки

Question

Привет всем, я играю с Vue JS, но для некоторых, как я не могу получить то, что я ожидал.Ниже приведен мой код.

Шаблон

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

То, что я хочу, это когда яизменить определенный текст кнопки, другие кнопки не должны быть затронуты.Но, похоже, мой код делает наоборот.Что мне здесь не хватает?Любая помощь, объяснение будет высоко ценится.Спасибо

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

В вашем примере 10 вы перебираете нормальное число, поэтому вы просто 10 раз показываете одну и ту же переменную name.Если вы теперь измените эту переменную name на что-то, она изменится во всех кнопках соответственно.

Вам нужен какой-то способ сохранить разные имена, например, массив объектов типа вашего items со всеми заголовками.

Я взял ваш код и немного его изменил.Вместо того, чтобы перебирать фиксированный счетчик, я создал массив имен и перебрал этот массив.Когда вы нажимаете одну из кнопок и изменяете текст, вместо простого изменения универсального атрибута name - вы меняете name в позиции в массиве.

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>