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

vue select v-model

greenriver 2021-11-02 17:01:04 ‧ 1141 瀏覽

分享至

大家好，
我想請問一下，
我遇到選擇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 }} |

直播中

1 個回答

chen1325117

iT邦新手 5 級 ‧ 2021-11-02 18:01:08

最佳解答

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

回應 2
分享
檢舉

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>

登入發表回應