使用 Vue 本地化页面上的按钮单击事件答案

【问题标题】：Localize Button click events on page using Vue使用 Vue 本地化页面上的按钮单击事件
【发布时间】：2020-12-17 19:57:08
【问题描述】：

我在一个页面上有多个按钮，当我单击一个按钮来切换按钮文本时，所有按钮都会改变。如何使用 VUE 分离功能并个性化每个按钮@click 以仅影响单击的按钮？在下面的 sn-p 中，您将看到所有按钮在单击时都会发生变化。我只想改变点击的按钮文本。

请参见下面的示例。此示例来自另一篇文章，所有功劳归于：

change button while pressing it with vue.js

new Vue({
  el: '#app',
  data: {
    isFavorite: false
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="toggleFavorite" v-show="!isFavorite">Add to favorites</button>
  <button @click="toggleFavorite" v-show="isFavorite">Delete from favorites</button>
 <button @click="toggleFavorite" v-show="!isFavorite">Add to favorites</button>
  <button @click="toggleFavorite" v-show="isFavorite">Delete from favorites</button>
</div>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

使用字典（对象）而不是单个变量：

data() {
  return {
    isFavorite: {}
  }
},

不是切换单个布尔值，而是切换对象上的属性：

<button @click="toggleFavorite('item1')" v-show="!isFavorite['item1']">Add to favorites</button>
<button @click="toggleFavorite('item1')" v-show="isFavorite['item1']">Delete from favorites</button>

切换：

methods: {
  toggleFavorite(item) {
    this.$set(this.isFavorite, item, !this.isFavorite[item]);
  }
}

如果还不清楚，请演示：

new Vue({
  el: '#app',
  data() {
    return {
      isFavorite: {}
    }
  },
  methods: {
    toggleFavorite(item) {
      this.$set(this.isFavorite, item, !this.isFavorite[item]);
    }
  }
})

<div id="app">
  <button @click="toggleFavorite('item100')" v-show="!isFavorite['item100']">Add to favorites</button>
  <button @click="toggleFavorite('item100')" v-show="isFavorite['item100']">Delete from favorites</button>

  <button @click="toggleFavorite('item101')" v-show="!isFavorite['item101']">Add to favorites</button>
  <button @click="toggleFavorite('item101')" v-show="isFavorite['item101']">Delete from favorites</button>
  
  <hr>
  
  <div v-for="x in 10" :key="x">
    <button @click="toggleFavorite(`item${x}`)" v-show="!isFavorite[`item${x}`]">Add to favorites</button>
    <button @click="toggleFavorite(`item${x}`)" v-show="isFavorite[`item${x}`]">Delete from favorites</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

【讨论】：

【解决方案2】：

这是因为 v-show 值相同。我认为这种实现不是 Vue 的最佳实践。您可以将 v-if v-else 用于数据值或仅按值更改文本。

new Vue({
  el: '#app',
  data: {
    isFavorite: false,
    isFavorite2:false
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
    },
    toggleFavorite2() {
      this.isFavorite2 = !this.isFavorite2;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="toggleFavorite" v-show="!isFavorite">Add to favorites</button>
  <button @click="toggleFavorite" v-show="isFavorite">Delete from favorites</button>

<button @click="toggleFavorite2" v-show="!isFavorite2">Add to favorites 2</button>
  <button @click="toggleFavorite2" v-show="isFavorite2">Delete from favorites 2</button>
</div>

【讨论】：