你們好,我想請問個問題。
就是在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傳送出去就可以了。
<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去取資料。
可以使用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 [];
}
},
}