iT邦幫忙

0

Vue中如何綁定selectOption裡的index

  • 分享至 

  • xImage

你們好,我想請問個問題。

就是在vue當中,使用select時,
平常我是用v-model綁定select的值。
但如果現在我還需要index,要怎麼將選擇到的index取出來?感謝

<script setup>
    import {ref} from 'vue'
    const selected = ref()
    const items= ref([1,2,3,4,5,6,7])
</script>

<template>
    <select v-model="selected">
        <option v-for="(item,index) in items" :key="item+index">
            {{item}}
        </option>
    </select>
</template>

(補充)
我需要的效果,類似這樣。
有兩個陣列,authors:[A,B,C],books:[a,b,c]。
a=[a1,a2,a3,a4]
b=[b1,b2]
c=[c1,c2,c3]
a是作者A寫的,b是作者B寫的,c是作者C寫的。

今天如果想讓使用者先選擇作者(select1),再選擇書本(select2),
那直接將作者的index帶入books[index]就可以了。

現在就是不知道怎麼取得被選取的作者index

<script setup>
    import {ref} from 'vue'
    //被選擇到的作者
    const selected = ref()
    //被選擇到的作者的index(不知道要怎麼將index存入這個變數裡...)
    const selectedIndex = ref()
    //作者
    const authors= ref([A,B,C])
    
    //書
    const a=[a1,a2,a3,a4]
    const b=[b1,b2]
    const c=[c1,c2,c3]
    const books=ref([a,b,c])
    
</script>

<template>
    //select1
    <select v-model="selected">
        <option v-for="(author,index) in authors" :key="author+index">
            {{author}
        </option>
    </select>
    
    
    //select2
    <select>
        //將作者的selectedIndex帶入
        <option v-for="(book,index) in books[selectedIndex]" 
                :key="book+index">
            {{book}
        </option>
    </select>
</template>

【已解決】對不起,我講錯了。
我是要將books的title 做成select選單。
然後使用者選擇到bookC的時候,將bookC的詳細資訊抓取出來呈現給使用者。
所以才需要bookC的index。

 const books = ref([
    {title:'bookA',page:100,price:100,description:'冒險'},
    {title:'bookB',page:180,price:152,description:'溫馨'},
    {title:'bookC',page:200,price:320,description:'奇幻'},
    {title:'bookD',page:200,price:100,description:'冒險'},
    {title:'bookE',page:300,price:130,description:'家庭'},
])

解決辦法:(不知道昨天是在糾結什麼.....一直想抓title的值)

<select v-model="selectedIndex">
    <option v-for="(author,index) in authors" 
        :key="author+index"
        //修改這裡 將value改成index就可以了
        //這樣selectedIndex的值,就會是index
        :value="index">
        {{author}
    </option>
</select>

之後post表單的時候,直接將index傳送出去就可以了。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
froce
iT邦大師 1 級 ‧ 2021-11-01 18:52:36
最佳解答
<option v-for="(item,index) in items" :key="item+index" :value="index">
            {{item}}
        </option>

你要的應該是這樣吧?


要取得index很簡單啊...

let selectedIndex =  authors.indexOf(selected)

實務上沒有人像你這樣定API的,正常的API應該會是

{"authors":[
    {"name": "A", books:["AB1", "AB2", "AB3"]},
    {"name": "B", books:["BB1", "BB2"]},
    {"name": "C", books:["CB1", "CB2", "CB3"]},
]}

或是每個關聯式下拉選單選完後做ajax去取資料。

greenriver iT邦研究生 4 級 ‧ 2021-11-01 21:31:34 檢舉

不是耶。我補充在文章下面了~

froce iT邦大師 1 級 ‧ 2021-11-02 08:01:39 檢舉

回答在上面更新。

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

謝謝幫忙,我突然想到怎麼解決了

1
frank_huang
iT邦新手 5 級 ‧ 2021-11-01 17:55:28

可以使用dictionary存入資訊,內容如下

items:[
    {
        display: 'item1'
        index: 1
    },
    {
        display: 'item2'
        index: 2
    },
    ...
];

這樣就可用 selected.index 取得需要的資訊
感覺應該可以,有誤的話再請指證 =D


改成這樣吧~ 用vue的 computed 去做相依

authors:[
    'aaa',
    'bbb',
]

books:{
    aaa:['aaa book1','aaa book2'],
    bbb:['bbb book1','bbb book2']
}

computed: {
    // 書籍 相依作者
    books() {
        if (this.author && this.author) {
          return this.books[this.author];
        } else {
          return [];
        }
    },
}

greenriver iT邦研究生 4 級 ‧ 2021-11-01 21:38:22 檢舉

謝謝你~這個方法 可能不行

greenriver iT邦研究生 4 級 ‧ 2021-11-02 11:59:42 檢舉

謝謝幫忙,我突然想到怎麼解決了

我要發表回答

立即登入回答