質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

解決済

複数チェック可能なボタンのmethodsの効率の良い書き方

cheche0830
cheche0830

総合スコア187

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

1回答

0グッド

0クリップ

147閲覧

投稿2022/11/12 08:34

前提

vue(nuxt)にて複数のボタンが並んでおり、チェックしたらselectedというクラスがつきます。それらは排他関係ではなくチェックボックスのようなイメージで、再度チェックすればそのボタンからはそのクラスがはずれます。すでに実現できているのですが書き方が壮絶にダサいので効率の良い書き方があればしりたいです。

該当のソースコード

<ul class="select-item-list"> <li :class="{'iselected': isActive1}" @click="CheckActive1()"> aaa </li> <li :class="{'selected': isActive2}" @click="CheckActive2()"> bbb </li> <li :class="{'selected': isActive3}" @click="CheckActive3()"> ccc </li> <li :class="{'selected': isActive4}" @click="CheckActive4()"> ddd </li> </ul> 中略 export default { data () { return { CheckActive1: false, CheckActive2: false, CheckActive3: false, CheckActive4: false, } }, methods: { CheckActive1() { this.CheckActive1 = !this.CheckActive1 }, CheckActive2() { this.CheckActive2 = !this.CheckActive2 }, CheckActive3() { this.CheckActive3 = !this.CheckActive3 }, CheckActive4() { this.CheckActive4 = !this.CheckActive4 } } }

実際はもっとボタン数が多くメンテナンス性も悪いので、
できれば数が増えてもメソッドなどいじらない方法で書きたいです。
ご教授お願いいたします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

同じボタンを複数配置するなら、配列とv-forを使うのが良いと思います。

配列とv-forを使う例:

Codepen: https://codepen.io/luuguas/pen/oNyWdzP

html

1<ul class="select-item-list"> 2 <li v-for="(name, index) in listName" :key="index" 3 :class="{ selected: isActive[index] }" 4 @click="onClick(index)"> 5 {{ name }} 6 </li> 7</ul>

js

1 data() { 2 return { 3 listName: ['aaa', 'bbb', 'ccc', 'ddd'], 4 isActive: [], 5 }; 6 }, 7 created() { 8 this.isActive = new Array(this.listName.length); 9 this.isActive.fill(false); 10 }, 11 methods: { 12 onClick(key) { 13 this.isActive[key] = !this.isActive[key]; 14 //Vue2.0の場合 15 //Vue.set(this.isActive, key, !this.isActive[key]); 16 }, 17 },

データには、各ボタンの表示名を表す配列listName、各ボタンの選択のON/OFFを表す配列isActiveを用意します。isActive は一旦空の配列で初期化しておき、後から created() で listName と同じ長さの配列を用意しています。

v-for="(name, index) in listName"とすると、 name に各ボタンの表示名、index に各ボタンの添字が順番に代入され、リストが表示されます。

クリック時は、onClick()の引数に index を渡すことで、選択したボタンのON/OFFを切り替えています。

ボタンの数を増減させたい場合は、listName を変更するだけで済みます。

投稿2022/11/13 04:18

luuguas

総合スコア435

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

cheche0830

2022/11/13 08:41

なるほどですね!ありがとうございます!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。