大家好,
我想請問一下,
我遇到選擇selectA,結果selectB跟 selectC會同時變動的問題。
今天我想做一個書店跟書的選單
因為為了要抓被選擇到的書本詳細資料,所以我用:value="index"去綁定,
<select v-model="selectedIndex" @change="onChange(index)">
<option v-for="(item,index_Book) in books"
:key="'select'+index_Book" :value="index_Book">
{{item.title}}
</option>
</select>
結果 我選擇selectA時, B跟C也會跟著變動.....
只要將:value="index"拿掉,就不會有連動的問題。但...就抓不到書本資訊了
<script setup>
import {ref,computed} from 'vue'
//店名
const stores=ref(['台北書店','台中書店','高雄書店'])
//書名,跟書本詳細資訊
const books = ref([
{title:'書本1',page:100,upperlimit:2,lowerlimit:3,cut:1},
{title:'書本2',page:152,upperlimit:2,lowerlimit:1,cut:1},
{title:'書本3',page:320,upperlimit:5,lowerlimit:4,cut:1},
{title:'書本4',page:100,upperlimit:5,lowerlimit:5,cut:1},
{title:'書本5',page:100,upperlimit:1,lowerlimit:1,cut:1}
])
//用來儲存選取到的書本index
const selectedIndex = ref()
//創造新的陣列,用來儲存被選取的書本詳細資料使用(item=[店名,{書本詳細資料}])
const total = ref(stores.value.map((item,index)=>{
return item=[item,{}]
}))
//選取時,利用index將詳細資料存入{}裡
const onChange = function(index){
return total.value[index].splice(1, 1, books.value[selectedIndex.value])
}
</script>
//template
<div v-for="(single,index) in total" :key="'total'+index">
<div>
<div>店名</div>
<div>
<input type="text" :value="single[0]">
</div>
</div>
<div>
<div>書名</div>
<div>
<select v-model="selectedIndex" @change="onChange(index)">
<option v-for="(item,index_Book) in books"
:key="'select'+index_Book" :value="index_Book">
{{item.title}}
</option>
</select>
</div>
</div>
<div>
<div>頁數</div>
<div>
<input type="text" :value="single[1].page">
</div>
</div>
<div>
<div>+</div>
<div>
<input type="text" :value="single[1].upperlimit">
</div>
</div>
<div>
<div>-</div>
<div>
<input type="text" :value="single[1].lowerlimit">
</div>
</div>
<div>
<div>庫存</div>
<div>
<input type="text" :value="single[1].cut">
</div>
</div>
</div>
不好意思路過好奇詢問
我以為v-model="selectedIndex"
那他應該就會一直顯示你最後選的那個選項不是?
是不是v-model應該是single[1]裡面的值
因為你的onChange是往這裡面存吧?
因為我將原本的value改成:value="index_Book"(將原本的值改成該結果的index),所以selectedIndex存的會是最後選項的index_Book而不是值。我原本的預想圖是:
用一個變數selectedIndex去當作所有select的暫存點。
selectA->v-model改變selectedIndex->並啟動onChange->用books[selectedIndex] 提取被選擇的資訊->存入total[0]的{}裡,就是total[0][1]。
selectB->v-model改變selectedIndex->並啟動onChange->用books[selectedIndex] 提取被選擇的資訊->存入total[1]的{}裡,就是total[1][1]。
然後將total展開,total[0][1]就是A的結果,total[1][1]就是B的結果。
這方面是成功的。
結果好像因為所有的select都是在同一個v-for="(single,index) in total"的子層,用:value="index_Book"後,結果就同步了.....
【已解決】感謝幫忙。
要將v-model改成綁定陣列,就能解決select連動的問題。
<script setup>
//修改這裡
const selectedIndex = ref([])
</script>
<template>
//修改這裡
<select v-model="selectedIndex[index]" @change="onChange(index)">
</select>
</template>