如何使用方法更改 selected v-select 项目?
How can I change the selected v-select item using a method?
我试图在脚本部分的方法中设置我的 v-select 组件的 selected 值。
这些是代码部分:
<v-flex xs4>
<v-select v-model="selected" :items="items" item-text="name"
item-value="value" outlined class="ml-2 mr-1" return-object></v-select>
</v-flex>
和脚本部分:
export default {
return{
data: function () {
items: [
{ name: 'item 1', value: 1 },
{ name: 'item 2', value: 2 },
{ name: 'item 3', value: 3 }],
selected: { name: 'iteam 1', value: 1 }
},
methods: {
apply (component) {
for (var i in this.items.entries()) {
if (i.name === component.item) {
this.selected.name = i.name
this.selected.value = i.value
}
}
}
}
}
}
我尝试过不同的版本,例如
this.selected = i
this.selected[name] = i.name
this.selected[value] = i.value
this.selected = { i.name, i.value }
但没有任何效果。
你需要一次性设置好selected
,比如this.selected = { name: 'item 3', value: 3 }
我将申请测试的参数类型更改为字符串,但它应该类似于:
apply (component) {
temp={}
this.items.forEach((i)=> {
if (i.name === component) {
temp.name = i.name;
temp.value = i.value;
}
});
this.selected=temp
}
我用 btn 调用了 apply
<v-btn v-for="n in 3" @click="apply(`item ${n}`)">Apply {{n}}</v-btn>
这是一个完整的例子:
new Vue({
el: '#app',
data () {
const items = [
{ name: 'item 1', value: 1 },
{ name: 'item 2', value: 2 },
{ name: 'item 3', value: 3 }
]
return {
items,
selected: items[1]
}
},
methods: {
apply (component) {
this.selected = this.items.find(item => item.name === component.item)
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-flex xs4>
<v-btn
v-for="item in items"
:key="item.value"
@click="apply({item: item.name})"
>
{{ item.name }}
</v-btn>
<v-select
v-model="selected"
:items="items"
item-text="name"
item-value="value"
outlined
class="ml-2 mr-1"
return-object
></v-select>
</v-flex>
</v-app>
</div>
在您的原始代码中,apply
方法似乎期望传递一个对象 (component
),其中 item
属性 匹配 name
其中一项。我试图保留这种行为,但不清楚你为什么要这样做。通常用于 item-value
的值是在幕后使用的基础 id 值,而不是 item-text
.
我没有尝试在对象之间复制值,而是将 items
中的 3 个值视为规范值,并确保 selected
始终设置为这 3 个值之一。不仅仅是一个对象具有相同的值但实际上是这些对象之一。这不是严格要求的,但对我来说这似乎是最简单的方法。
这是一个老问题,但让我 post 我的答案也能帮助其他人,经过大量搜索我已经到了这一点,我想与其他人分享嗯。
//This will load all your items in dropdown
<v-select
v-model="selected"
:items="items"
item-text="name"
item-value="value"
label="Select Item"
dense>
</v-select>
现在编辑部分
假设您想编辑一条记录,那么您可能会在 vuejs 的编辑方法中传递记录 ID,然后在 vuejs 的编辑方法中,您将为该特定记录执行编辑 axios 调用以首先显示它在字段内,然后您将更新。但是在更新之前,当您已经为该特定 id 加载数据时,您需要在 vuejs 的编辑方法中做一些事情。
现在假设您已根据特定 ID 从数据库中收到一条记录,您将看到一个下拉列表 ID 我的意思是说您在存储数据期间保存的下拉列表的外键。
假设您有 items
数组,其中包含下拉列表的全部数据。在这里面你有一个 value
和 name
字段。因此,在编辑特定记录期间,您有这个 items
数组和数据库中的一个对象。现在您可以使用以下代码了。
vuejs内部编辑方法
//item_id it is like a foreign key for dropdown you have in your table
this.selected = this.items.find(item => item.value === parseInt(res.data.item_id))
this.selected = parseInt(this.selected.item_id)
注意:我正在执行 parseInt() 这是因为当您在控制台签入时,主键是一个整数,如 1
,但外键如 rating_id 是字符串 i-e "1"
。如果你不使用 parseInt(),你也可以使用两个等号 ==
,但我没有检查过。
为了清楚理解,我只是分享一个示例编辑代码,可能会对您有所帮助
editItem(id){
axios.get( `/api/category/${id}` ).then( res => {
if(res.data.status === 200){
console.log(res.data.data)
this.name = res.data.data.name
this.id = res.data.data.id
this.parent_id = this.list_categories.find(item => item.id === parseInt(res.data.data.parent_id))
this.parent_id = parseInt(this.parent_id.id)
this.edited = true
}else{
this.$toaster.error( res.data.message )
}
});
}
我试图在脚本部分的方法中设置我的 v-select 组件的 selected 值。 这些是代码部分:
<v-flex xs4>
<v-select v-model="selected" :items="items" item-text="name"
item-value="value" outlined class="ml-2 mr-1" return-object></v-select>
</v-flex>
和脚本部分:
export default {
return{
data: function () {
items: [
{ name: 'item 1', value: 1 },
{ name: 'item 2', value: 2 },
{ name: 'item 3', value: 3 }],
selected: { name: 'iteam 1', value: 1 }
},
methods: {
apply (component) {
for (var i in this.items.entries()) {
if (i.name === component.item) {
this.selected.name = i.name
this.selected.value = i.value
}
}
}
}
}
}
我尝试过不同的版本,例如
this.selected = i
this.selected[name] = i.name
this.selected[value] = i.value
this.selected = { i.name, i.value }
但没有任何效果。
你需要一次性设置好selected
,比如this.selected = { name: 'item 3', value: 3 }
我将申请测试的参数类型更改为字符串,但它应该类似于:
apply (component) {
temp={}
this.items.forEach((i)=> {
if (i.name === component) {
temp.name = i.name;
temp.value = i.value;
}
});
this.selected=temp
}
我用 btn 调用了 apply
<v-btn v-for="n in 3" @click="apply(`item ${n}`)">Apply {{n}}</v-btn>
这是一个完整的例子:
new Vue({
el: '#app',
data () {
const items = [
{ name: 'item 1', value: 1 },
{ name: 'item 2', value: 2 },
{ name: 'item 3', value: 3 }
]
return {
items,
selected: items[1]
}
},
methods: {
apply (component) {
this.selected = this.items.find(item => item.name === component.item)
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-flex xs4>
<v-btn
v-for="item in items"
:key="item.value"
@click="apply({item: item.name})"
>
{{ item.name }}
</v-btn>
<v-select
v-model="selected"
:items="items"
item-text="name"
item-value="value"
outlined
class="ml-2 mr-1"
return-object
></v-select>
</v-flex>
</v-app>
</div>
在您的原始代码中,apply
方法似乎期望传递一个对象 (component
),其中 item
属性 匹配 name
其中一项。我试图保留这种行为,但不清楚你为什么要这样做。通常用于 item-value
的值是在幕后使用的基础 id 值,而不是 item-text
.
我没有尝试在对象之间复制值,而是将 items
中的 3 个值视为规范值,并确保 selected
始终设置为这 3 个值之一。不仅仅是一个对象具有相同的值但实际上是这些对象之一。这不是严格要求的,但对我来说这似乎是最简单的方法。
这是一个老问题,但让我 post 我的答案也能帮助其他人,经过大量搜索我已经到了这一点,我想与其他人分享嗯。
//This will load all your items in dropdown
<v-select
v-model="selected"
:items="items"
item-text="name"
item-value="value"
label="Select Item"
dense>
</v-select>
现在编辑部分
假设您想编辑一条记录,那么您可能会在 vuejs 的编辑方法中传递记录 ID,然后在 vuejs 的编辑方法中,您将为该特定记录执行编辑 axios 调用以首先显示它在字段内,然后您将更新。但是在更新之前,当您已经为该特定 id 加载数据时,您需要在 vuejs 的编辑方法中做一些事情。
现在假设您已根据特定 ID 从数据库中收到一条记录,您将看到一个下拉列表 ID 我的意思是说您在存储数据期间保存的下拉列表的外键。
假设您有 items
数组,其中包含下拉列表的全部数据。在这里面你有一个 value
和 name
字段。因此,在编辑特定记录期间,您有这个 items
数组和数据库中的一个对象。现在您可以使用以下代码了。
vuejs内部编辑方法
//item_id it is like a foreign key for dropdown you have in your table
this.selected = this.items.find(item => item.value === parseInt(res.data.item_id))
this.selected = parseInt(this.selected.item_id)
注意:我正在执行 parseInt() 这是因为当您在控制台签入时,主键是一个整数,如 1
,但外键如 rating_id 是字符串 i-e "1"
。如果你不使用 parseInt(),你也可以使用两个等号 ==
,但我没有检查过。
为了清楚理解,我只是分享一个示例编辑代码,可能会对您有所帮助
editItem(id){
axios.get( `/api/category/${id}` ).then( res => {
if(res.data.status === 200){
console.log(res.data.data)
this.name = res.data.data.name
this.id = res.data.data.id
this.parent_id = this.list_categories.find(item => item.id === parseInt(res.data.data.parent_id))
this.parent_id = parseInt(this.parent_id.id)
this.edited = true
}else{
this.$toaster.error( res.data.message )
}
});
}