iT邦幫忙

1

【已解決】Vue 有多個select時,綁定的問題

  • 分享至 

  • xImage

大家好,
我想請問一下,
我遇到選擇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>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
chen1325117
iT邦新手 5 級 ‧ 2021-11-02 18:01:08
最佳解答

不好意思路過好奇詢問
我以為v-model="selectedIndex"
那他應該就會一直顯示你最後選的那個選項不是?
是不是v-model應該是single[1]裡面的值
因為你的onChange是往這裡面存吧?

greenriver iT邦研究生 4 級 ‧ 2021-11-02 22:37:50 檢舉

因為我將原本的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"後,結果就同步了.....

greenriver iT邦研究生 4 級 ‧ 2021-11-03 08:47:06 檢舉

【已解決】感謝幫忙。
要將v-model改成綁定陣列,就能解決select連動的問題。

<script setup>
    //修改這裡
    const selectedIndex = ref([])
</script>
<template>
    //修改這裡
    <select v-model="selectedIndex[index]"   @change="onChange(index)">
    </select>
</template>

我要發表回答

立即登入回答