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

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

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

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

667閲覧

Vue.jsでのv-on:clickについて

nagano0141cafe

総合スコア39

Vue.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/08/18 07:27

閲覧ありがとうございます。
下記につきまして困っております。ご教授いただけますと幸いです。

前提・実現したいこと

Vue.jsにて同じ要素を使用して作成したプルダウンをv-on:clickを使用して"個別に"開閉したい。

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

全てv-on:click="active"にて制御してしまっているため、1つのタブを開くとすべてのタブが反応してしまう。
また、2つめ、3つめのindexをクリックしても1つ目のindexをクリックした判定になる。

該当のソースコード

vue

1<template> 2 <ul id="explaining_list" class="explaining_list"> 3 <li id="aaa" class="explaining_list_item" v-on:click="active"> 4 <h3 id="explaining_index" class="explaining_index alphabetic_font">DESCRIPTION</h3> 5 <transition name="slidein"> 6 <div class="explaining_detail" v-if="show"> 7 <p class="explaining_detail_text">test</p> 8 </div> 9 </transition> 10 </li> 11 <li id="size_guide" class="explaining_list_item" v-on:click="active"> 12 <h3 id="bbb" class="explaining_index alphabetic_font">SIZE GUIDE</h3> 13 <transition name="slidein"> 14 <div class="explaining_detail" v-if="show"> 15 <p class="explaining_detail_text">test</p> 16 </div> 17 </transition> 18 </li> 19 <li id="care_guide" class="explaining_list_item" v-on:click="active"> 20 <h3 id="ccc" class="explaining_index alphabetic_font">CARE GUIDE</h3> 21 <transition name="slidein"> 22 <div class="explaining_detail" v-if="show"> 23 <p class="explaining_detail_text">test</p> 24 </div> 25 </transition> 26 </li> 27 <li id="about_delivery" class="explaining_list_item" v-on:click="active"> 28 <h3 id="ddd" class="explaining_index">配送</h3> 29 <transition name="slidein"> 30 <div class="explaining_detail" v-if="show"> 31 <p class="explaining_detail_text">test</p> 32 </div> 33 </transition> 34 </li> 35 <li id="about_exchange" class="explaining_list_item" v-on:click="active"> 36 <h3 id="eee" class="explaining_index">返品</h3> 37 <transition name="slidein"> 38 <div class="explaining_detail" v-if="show"> 39 <p class="explaining_detail_text">test</p> 40 </div> 41 </transition> 42 </li> 43 </ul> 44</template> 45 46<script> 47 48export default { 49 name: 'Index', 50 data() { 51 return { 52 show: false 53 } 54 }, 55 methods: { 56 active: function () { 57 this.show = !this.show; 58 var target = document.getElementById('explaining_index'); 59 target.classList.toggle('open'); 60 } 61 } 62} 63</script> 64<style> 65.slidein-enter-active, .slidein-leave-active { 66 transform: translate(0px, 0px); 67 transition: 0.3s; 68} 69.slidein-enter, .slidein-leave-to { 70 transform: translateY(-30%) translateY(0px); 71 transition: 0.3s; 72} 73.explaining_list { 74 padding: 0 3%; 75 margin-top: 22%; 76} 77.explaining_list_item { 78 border-top: 1px solid #000; 79} 80.explaining_list_item:last-child { 81 border-bottom: 1px solid #000; 82} 83.explaining_index { 84 position: relative; 85 font-size: 1.0rem; 86 font-weight: normal; 87 text-align: center; 88 padding: 6% 0; 89} 90.explaining_index::after { 91 content: ""; 92 position: absolute; 93 top: 34%; 94 right: 20%; 95 display: block; 96 background-image: url(/img/icons/icon_plus.svg); 97 background-repeat: no-repeat; 98 background-size: contain; 99 height: 16px; 100 width: 16px; 101 transition: 0.3s; 102} 103.explaining_index.open::after { 104 content: ""; 105 background-image: url(/img/icons/icon_minus.svg); 106 transition: 0.3s; 107} 108.explaining_detail { 109 padding: 4% 0 9%; 110} 111</style> 112

試したこと

v-on:click="active"をv-on:click="active02", v-on:click="active03"...と各プルダウンに量産し、それに対応するv-if="show02", v-if="show03"...を各プルダウンに対応させたが、変わらず1つ目のみが開いてしまった。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

開閉状態を個別に管理したいのですから、個別の変数が必要です。
以下、サンプルコードです。直接修正しているわけではないので、参考にしてください。
https://codepen.io/mather314/pen/poPXEqv

投稿2021/08/18 09:05

mather

総合スコア6753

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nagano0141cafe

2021/08/19 00:34

やはり個別に対応する必要があるのですね... なるべく記載を少なく、簡略化したいのでJS書く方向に修正しようと思います。 回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問