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中，因此您只显示了相同变量name的10倍。如果现在将变量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>

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

1 个答案: