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

标签 javascript html vue.js vuejs2 vuetify.js

大家好,我正在使用 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5838090819c938cb5c4dbc0dbc6" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67111202130e011e275649524954" rel="noreferrer noopener nofollow">[email protected]</a>/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>

最佳答案

您正在迭代一个普通数字,在示例 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>

关于javascript - Vue 在更改特定按钮后更新所有按钮文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54924621/

相关文章:

javascript - 如何在检查单选按钮时使用 PHP、JS 删除禁用的按钮

javascript - 使用关键字搜索 json

javascript - 正则表达式匹配未注释的行

javascript - 使用 Javascript 在 HTML 中刷新后保留选项

html - 改变 child 的特异性

javascript - 如何在 VueJS 组件属性上连接具有变量值的文本?

javascript - Angular 2 : Two backend service calls on success of first service

javascript - 使动画变慢(jQuery)

vue.js - vue-auth 重定向路径缺少命名路由的参数

javascript - 如何监听 'props' 变化