標題の通り、仕様が複雑なためなかなか解決策を見つけることができず、
質問させていただきました。
内容としては、以下の通りです。
仕様
①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が表示される)ため、
それぞれを独立させたい。
何卒お知恵をお貸したく。。。よろしくお願い致します。