英文:
How to change v-select option in vuetify by code without v-model
问题
Sure, here's the translated code portion:
我需要通过代码设置 v-select 中的选项。
我无法使用 v-model。
我在 https://codepen.io/luizalves/pen/OJBYbQZ?editors=101 创建了一个 CodePen。
我需要：
1. 在 v-select 中选择一个选项
2. 点击 "Set Select" 按钮更改选项
我的问题是按钮点击仅在第一次起作用。
我做错了什么？
// 标记
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col cols="6">
<v-subheader>
自定义项目
</v-subheader>
</v-col>
<v-btn @click="setSelect()">设置选择</v-btn>
<v-col cols="6">
<v-select
:value="select"
:items="items"
item-text="state"
item-value="abbr"
label="选择"
persistent-hint
single-line
></v-select>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
// 脚本
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
select: 'FL' ,
items: [
{ state: '佛罗里达', abbr: 'FL' },
{ state: '乔治亚', abbr: 'GA' },
{ state: '内布拉斯加', abbr: 'NE' },
{ state: '加利福尼亚', abbr: 'CA' },
{ state: '纽约', abbr: 'NY' },
],
}
},
methods:{
setSelect(){
this.select="GA"
},
}
})
Is there anything else you need?
英文:
I need to set a option in v-select by code.
I can´t use v-model.
I created a codepen in https://codepen.io/luizalves/pen/OJBYbQZ?editors=101
I need:
- Choice a select option in v-select
- Change the option clicking the button "Set Select"
My problem is that the button click is working only on the first time.
What am I doing wrong?
//markup
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col cols="6">
<v-subheader>
Custom items
</v-subheader>
</v-col>
<v-btn @click="setSelect()">Set Select</v-btn>
<v-col cols="6">
<v-select
:value="select"
:items="items"
item-text="state"
item-value="abbr"
label="Select"
persistent-hint
single-line
></v-select>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
//script
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
select: 'FL' ,
items: [
{ state: 'Florida', abbr: 'FL' },
{ state: 'Georgia', abbr: 'GA' },
{ state: 'Nebraska', abbr: 'NE' },
{ state: 'California', abbr: 'CA' },
{ state: 'New York', abbr: 'NY' },
],
}
},
methods:{
setSelect(){
this.select="GA"
},
}
})
答案1
得分: 1
你可以使用@change事件来设置选定的值：
<v-select
:value="select"
:items="items"
item-text="state"
item-value="abbr"
label="Select"
persistent-hint
single-line
@change="setSelected"
></v-select>
在这段代码中，@change事件用于设置选定的值，其中:value绑定到select，:items绑定到items，item-text指定显示文本，item-value指定值，label为选择框提供标签，persistent-hint和single-line用于调整外观。
英文:
You can use @change event and set selected value:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
select: 'FL' ,
items: [
{ state: 'Florida', abbr: 'FL' },
{ state: 'Georgia', abbr: 'GA' },
{ state: 'Nebraska', abbr: 'NE' },
{ state: 'California', abbr: 'CA' },
{ state: 'New York', abbr: 'NY' },
],
}
},
methods:{
setSelect(){
this.select = "GA"
},
setSelected(e){
this.select = e
},
}
})
<!-- language: lang-html -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col cols="6">
<v-subheader>
Custom items
</v-subheader>
</v-col>
<v-btn @click="setSelect()">Set Select</v-btn>
<v-col cols="6">
<v-select
:value="select"
:items="items"
item-text="state"
item-value="abbr"
label="Select"
persistent-hint
single-line
@change="setSelected"
></v-select>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论