如何在 VueJS 中创建 @click on select 菜单
How to create @click on select menu in VueJS
我想在默认为空的 select 菜单中创建 @click
。我尝试在 select
、option
甚至 div
中创建它,但它似乎不起作用。
所以,我的 template
:
中有这段代码
<div style="float: right; padding-right: 13px">
<span>
Sort by:
</span>
<select v-model="sort">
<option
v-for="item in items"
:key="item.id"
:value="item"
@click="sortBy"
v-text="item.title"
></option>
</select>
</div>
data
中的这个:
items: [
{
id: 1,
title: 'Price: Low to High',
sort: 1
},
{
id: 2,
title: 'Price: High to Low',
sort: 2
},
{
id: 3,
title: 'Newest first',
sort: 3
},
{
id: 4,
title: 'Oldest first',
sort: 4
}
],
sort: null
methods
中的这个:
sortBy() {
console.log(this.sort) // console.log for tests
},
感谢您的回答
<div style="float: right; padding-right: 13px">
<span>
Sort by:
</span>
<select v-model="sort">
<option
v-for="item in sortedList" //Notice the computed var
:key="item.id"
:value="item"
@click="sortBy"
v-text="item.title"
></option>
</select>
</div>
computed:{
sortedList(){
if(this.sort){
//FILTER YOUR LIST
}
//by default return original list
return this.items
}
},
data(){
return {
items: [
{
id: 1,
title: 'Price: Low to High',
sort: 1
},
{
id: 2,
title: 'Price: High to Low',
sort: 2
},
{
id: 3,
title: 'Newest first',
sort: 3
},
{
id: 4,
title: 'Oldest first',
sort: 4
}
],
sort: null
}
},
methods:{
sortBy(){
this.sort = !this.sort
}
}
我想在默认为空的 select 菜单中创建 @click
。我尝试在 select
、option
甚至 div
中创建它,但它似乎不起作用。
所以,我的 template
:
<div style="float: right; padding-right: 13px">
<span>
Sort by:
</span>
<select v-model="sort">
<option
v-for="item in items"
:key="item.id"
:value="item"
@click="sortBy"
v-text="item.title"
></option>
</select>
</div>
data
中的这个:
items: [
{
id: 1,
title: 'Price: Low to High',
sort: 1
},
{
id: 2,
title: 'Price: High to Low',
sort: 2
},
{
id: 3,
title: 'Newest first',
sort: 3
},
{
id: 4,
title: 'Oldest first',
sort: 4
}
],
sort: null
methods
中的这个:
sortBy() {
console.log(this.sort) // console.log for tests
},
感谢您的回答
<div style="float: right; padding-right: 13px">
<span>
Sort by:
</span>
<select v-model="sort">
<option
v-for="item in sortedList" //Notice the computed var
:key="item.id"
:value="item"
@click="sortBy"
v-text="item.title"
></option>
</select>
</div>
computed:{
sortedList(){
if(this.sort){
//FILTER YOUR LIST
}
//by default return original list
return this.items
}
},
data(){
return {
items: [
{
id: 1,
title: 'Price: Low to High',
sort: 1
},
{
id: 2,
title: 'Price: High to Low',
sort: 2
},
{
id: 3,
title: 'Newest first',
sort: 3
},
{
id: 4,
title: 'Oldest first',
sort: 4
}
],
sort: null
}
},
methods:{
sortBy(){
this.sort = !this.sort
}
}