Javascript Vue在更改特定按钮后更新所有按钮文本

大家好，我正在玩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>

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

我想要的是，当我更改特定按钮文本时，其他按钮不应受到影响。但我的代码似乎做了相反的事情。我错过了什么？任何帮助，解释将不胜感激。谢谢

newvue({
el:“#应用程序”，
数据：（）=>({
名称：“默认值”，
项目：[
{title:'单击我1'}，
{title:'单击我2'}，
{title:'单击我3'}，
{title:'单击我2'}
],
计数：10
}),
方法：{
测试（标题）{
this.name=标题
}
}
})

{{name}}
{{item.title}

在您的示例10中，您正在迭代一个正常数，因此您只需显示相同变量

名称的10倍。
如果您现在将该变量
name
更改为某个值，则所有按钮中的变量都会相应更改

您需要某种方法来保存不同的名称，例如，一组对象，如
项
，以及所有标题

我把你的密码改了一点。我没有迭代固定计数，而是创建了一个名称数组并迭代该数组。单击其中一个按钮并更改文本时，不只是更改通用
名称
属性，而是更改数组中位置处的
名称


newvue({
el:“#应用程序”，
数据：（）=>({
姓名：[
{name:'default 1'}，{name:'default 2'}，{name:'default 3'}，{name:'default 4'}]，
项目：[
{title:'单击我1'}，
{title:'单击我2'}，
{title:'单击我3'}，
{title:'单击我4'}
],
}),
方法：{
测试（标题、索引）{
此.names[index].name=title
}
}
})

{{x.name}
{{item.title}