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

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

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

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

Vue.js

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1483閲覧

【Vue.js】複製可能(同項目)なフォームで、それぞれ異なる値を出力したい【お助けください】

frtne

総合スコア29

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

Vue.js

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/08/20 13:59

編集2022/01/12 10:55

標題の通り、仕様が複雑なためなかなか解決策を見つけることができず、
質問させていただきました。

内容としては、以下の通りです。

仕様

①Show Modalを押下すると、モーダルが発生する。

<button id="show-modal" @click="showModal = true">Show Modal</button>

②モーダルの中身は以下の通り(選択肢を選択すると、③のdiplayhogeに出力される)

<DefaultModal v-if="showModal" @close="showModal = false"> <div slot="body"> <div> <input type="radio" name="1" @change="fst" value="1-1">1-1 <input type="radio" name="1" @change="fst" value="1-2">1-2 <input type="radio" name="1" @change="fst" value="1-3">1-3 </div> <div> <input type="radio" name="2" @change="sec" value="2-1">2-1 <input type="radio" name="2" @change="sec" value="2-2">2-2 <input type="radio" name="2" @change="sec" value="2-3">2-3 </div> <div> <input type="radio" name="3" @change="thr" value="3-1">3-1 <input type="radio" name="3" @change="thr" value="3-2">3-2 <input type="radio" name="3" @change="thr" value="3-3">3-3 </div> <button @click="showModal = false">確定</button> </div> </DefaultModal>

③ <button @click="addModal">モーダル増殖</button>を押すと以下が複製される。

<div v-for="item in items" :key="item"> <button id="show-modal" @click="showModal = true">Show Modal</button> <div> <p>{{ displayfst }}</p> <p>{{ displaysec }}</p> <p>{{ displaythr }}</p> </div> </div>

全体的なコード

vue

1<template> 2<div> 3 <div v-for="item in items" :key="item"> 4 <button id="show-modal" @click="showModal = true">Show Modal</button> 5 <div> 6 <p>{{ displayfst }}</p> 7 <p>{{ displaysec }}</p> 8 <p>{{ displaythr }}</p> 9 </div> 10 </div> 11 <button @click="addModal">複製!</button> 12 <DefaultModal v-if="showModal" @close="showModal = false"> 13 <div slot="body"> 14 <div> 15 <input type="radio" name="1" @change="fst" value="1-1">1-1 16 <input type="radio" name="1" @change="fst" value="1-2">1-2 17 <input type="radio" name="1" @change="fst" value="1-3">1-3 18 </div> 19 <div> 20 <input type="radio" name="2" @change="sec" value="2-1">2-1 21 <input type="radio" name="2" @change="sec" value="2-2">2-2 22 <input type="radio" name="2" @change="sec" value="2-3">2-3 23 </div> 24 <div> 25 <input type="radio" name="3" @change="thr" value="3-1">3-1 26 <input type="radio" name="3" @change="thr" value="3-2">3-2 27 <input type="radio" name="3" @change="thr" value="3-3">3-3 28 </div> 29 <button @click="showModal = false">確定</button> 30 </div> 31 </DefaultModal> 32</div> 33</template> 34 35<script> 36import DefaultModal from '@/components/DefaultModal.vue'; 37 38export default { 39 name: 'Reserve', 40 components: { 41 DefaultModal, 42 }, 43 data() { 44 return { 45 showModal: false, 46 displayfst: '', 47 displaysec: '', 48 displaythr: '', 49 items: [{ id: 1 }], 50 }; 51 }, 52 methods: { 53 fst(e) { 54 const target = e.target.value; 55 this.displayfst = target; 56 }, 57 sec(e) { 58 const target = e.target.value; 59 this.displaysec = target; 60 }, 61 thr(e) { 62 const target = e.target.value; 63 this.displaythr = target; 64 }, 65 addModal() { 66 const max = this.items.reduce((a, b) => (a > b ? a : b), 0); 67 this.items.push({ 68 id: max + 1, 69 }); 70 }, 71 }, 72}; 73</script> 74 75<style lang="scss"> 76</style> 77

実現したいこと

・複製!した場合に、モーダルで選択肢を選択した際に全て同じ値が出力されてしまう
(例えば、1−1を選択した場合、複製した全てのdisplayFstに1−1が表示される)ため、
それぞれを独立させたい。

何卒お知恵をお貸したく。。。よろしくお願い致します。

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

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

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

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

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

coco_bauer

2019/08/20 14:08

質問に正確な詳細仕様を書いてください。 「複製!は、ユーザー任意になるため予め「displayfst1、displayfst2」のように用意することが難しい」と書かれていますが、連番を付加するのは良くあることで、どういう理由で、何が難しいのかが理解できません(そもそも、何がしたいのかという仕様が示されていないので、理解のしようがないのですが)
frtne

2019/08/20 14:16

失礼しました。。。更新いたしました
guest

回答1

0

細かな仕様が分からないので「複製可能で選択した値をそれぞれで出す」という点を解決しただけですが、このような形はどうでしょうか。
複製時は選択された情報を保存する配列を複製、モーダルを開くときに参照する配列のインデックスを切り替えるような方法で後はバインディングで自動で表示させてます。
詳細な仕様次第では再考の余地がありそうですが一つの手法として参考にしていただければと思います。

vue

1<template> 2<div> 3 <div v-for="(item, index) in select" :key="item"> 4 <button id="show-modal" @click="openModal(index)">Show Modal</button> 5 <div> 6 <p v-for="value in select[index]">{{ value }}</p> 7 </div> 8 </div> 9 <button @click="addModal">複製!</button> 10 <DefaultModal v-if="showModal" @close="showModal = false"> 11 <div slot="body"> 12 <div> 13 <input type="radio" name="1" v-model="select[index][0]" value="1-1">1-1 14 <input type="radio" name="1" v-model="select[index][0]" value="1-2">1-2 15 <input type="radio" name="1" v-model="select[index][0]" value="1-3">1-3 16 </div> 17 <div> 18 <input type="radio" name="2" v-model="select[index][1]" value="2-1">2-1 19 <input type="radio" name="2" v-model="select[index][1]" value="2-2">2-2 20 <input type="radio" name="2" v-model="select[index][1]" value="2-3">2-3 21 </div> 22 <div> 23 <input type="radio" name="3" v-model="select[index][2]" value="3-1">3-1 24 <input type="radio" name="3" v-model="select[index][2]" value="3-2">3-2 25 <input type="radio" name="3" v-model="select[index][2]" value="3-3">3-3 26 </div> 27 <button @click="showModal = false">確定</button> 28 </div> 29 </DefaultModal> 30</div> 31</template> 32 33<script> 34import DefaultModal from '@/components/DefaultModal.vue'; 35 36const TEMPLATE = ['', '', ''] 37 38export default { 39 name: 'Reserve', 40 components: { 41 DefaultModal, 42 }, 43 data() { 44 return { 45 showModal: false, 46 select: [[...TEMPLATE]], 47 index: 0 48 }; 49 }, 50 methods: { 51 openModal(index) { 52  this.showModal = true 53 this.index = index 54 }, 55 addModal() { 56  this.select.push([...TEMPLATE]) 57 }, 58 } 59}; 60</script>

投稿2019/08/23 10:53

編集2019/08/23 10:58
nt4c

総合スコア768

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問