Vue.js v-for,@clickでテキスト変更

前提・実現したいこと

v-forで繰り返し表示しているボタンのテキストをクリックで個別に変更したい

発生している問題・エラーメッセージ

繰り返し表示のうち、一か所をクリックしたら、全箇所のテキストが変更されてしまいます。
クリックした個所の情報は取れてます。

ボタンがv-forの対象に入ってなく、methodsで真偽判定しているだけなので
全要素が変わってしまうのだと思いますが、色々試してもうまくいきません。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Vue.js v-for</title>
7    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8  </head>
9  <body>
10    <h2>v-for test</h2>
11    <div id="app">
12      <table>
13        <thead>
14          <tr>
15            <th>名前</th>
16            <th>お気に入り</th>
17          </tr>
18        </thead>
19        <tbody>          
20          <tr v-for="(item,index) in items" @click="onClick(index,$event)">
21            <td>{{item.name}}</td>
22            <td><button>{{buttonText ? '追加する': '追加済み'}}</button></td>
23          </tr>
24        </tbody>
25      </table>
26    </div>
27
28    <script>
29      new Vue({
30        el: '#app',
31        data: {
32          buttonText: 'true',
33          items: [
34            { name: "リンゴ"},
35            { name: "ミカン"},
36            { name: "ブドウ"}, 
37          ]
38          },
39
40        methods: {    
41          onClick: function (e) {
42            alert(e)
43            if(this.buttonText) {
44              this.buttonText = false
45            } else {
46              this.buttonText = true
47            }      
48          },
49        },
50      });
51    </script>
52  <script src="/js/script.js"></script>
53  </body>
54</html>

試したこと

・配列自体にbuttonText: trueを追加(pushではなく、最初から記入)
・<td v-for="buttonText in data">, <button v-for・・・>
・<tr v-for・・・> から <template v-for・・・>へ変更して <tr>内に挟む。
・@click.各種修飾子
等

補足情報

実際はJsonを取得して、カートへ追加するような作業をしていますが
とりあえず上記のコードで動けば何とかなりそうです。
よろしくお願い致します。

行動規範の内容に同意します

回答2件

自己解決

以下、2点の対応で何とかなりました。

・連想配列にbuttonTextを入れる
・配列indexを引数にクリックイベントでbuttonTextの文字列変更

一度、コードをバラしてシンプルにしたので、少し異なりますが
ポイントとしては解決しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js v-for n</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">      
      <div v-for="(item,index) in items">
        {{item.name}}
        <button v-on:click="changeButtonText(index)">{{ item.buttonText }}</button>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          items: [
            {name: "リンゴ", buttonText: '追加'},
            {name: "ミカン", buttonText: '追加'},
            {name: "ブドウ", buttonText: '追加'}, 
          ]
        },

        methods: {
          changeButtonText: function(index) {
            if(this.items[index].buttonText === '追加済み') {
              this.items[index].buttonText = '追加'
            } else {
              this.items[index].buttonText = '追加済み'
            }
          }
        },
      });
    </script>
</body>
</html>

投稿2020/10/12 15:55

sothilder

総合スコア6

buttonTextがひとつしかないから。itemsの数だけbuttonTextが必要なのではないでしょうか。手っ取り早いのは、こうすることかと。

vue
1 
2          <tr v-for="(item,index) in items" @click="onClick(index,$event)">
3            <td>{{item.name}}</td>
4            <td><button>{{item.buttonText ? '追加する': '追加済み'}}</button></td>
5          </tr>
6          ...
7          // buttonText: true
8          items: [
9            { name: "リンゴ", buttonText: true},
10            { name: "ミカン", buttonText: true},
11            { name: "ブドウ", buttonText: true}, 
12          ]