v-select : 不能显示选中的元素
Posted
技术标签:
【中文标题】v-select : 不能显示选中的元素【英文标题】:v-select : cant show the seleted element 【发布时间】:2018-11-15 16:38:12 【问题描述】:我在我的项目中使用 Vuetify。当我通过 v-select 插入一些数据时,它工作正常。同样,当我编辑也可以使用的数据时。唯一的问题是当我点击编辑时我看不到选定的元素。
这是我的代码
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="text"
item-value="customer.rating"
single-line
></v-select>
注意:如果我使用 customer.rating 它会给出这样的输出
"id": 1, "text": "Bad"
如果我选择不同的元素,它会在数据库中完全改变。所以一切都很好。唯一的要求是我希望在单击“编辑”时将此值 Bad 显示为选定元素。
这是我的项目文件https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue的完整代码
提前致谢
【问题讨论】:
item-value
应该是id
我认为?
“当我点击编辑” - 这是什么意思?
Traxo - 项目值,id 显示选定值。但是当我提交时,显示错误:不支持的字段值:未定义(在字段 rating.id 中找到)
webnoob - 我有 2 个表单,第一个用于添加数据,还有一个用于编辑该数据的选项。因此,当单击编辑按钮时,会出现第二个表单及其值。除 v-select 剂量显示其选定值外,所有值在每个字段中都完美显示
好的,你发布的代码没有显示,所以我们无能为力。如果可能的话,做一个小提琴。
【参考方案1】:
这是个老问题,但让我发布我的答案以帮助其他人,经过大量搜索后,我来到了这一点,我也想与其他人分享。
//This will load all your ratings in dropdown
<v-select
v-model="customer.ratings"
:items="ratings"
item-text="text"
item-value="id"
label="Rating"
dense>
</v-select>
现在编辑零件
假设你想编辑一条记录,所以你可能会在你的 vuejs 的编辑方法中传递记录 id,然后在 vuejs 的编辑方法中,你将为该特定记录执行一个编辑 axios 调用,以首先在字段中显示它然后你会更新。但是在更新之前,你需要在你的 vuejs 的编辑方法中做一些事情,因为你已经为那个特定的 id 加载了数据。
现在假设您已根据特定 id 从数据库中收到一条记录,您将看到一个下拉列表 id,我的意思是说您在存储数据期间保存的下拉列表的外键。
假设您有 ratings
数组,其中包含下拉列表的全部数据。在这里面你有一个id
和text
字段。因此,在编辑特定记录期间,您拥有此 ratings
数组和数据库中的对象。现在你可以使用下面的代码了。
vuejs的内部编辑方法
this.customer.ratings = this.ratings.find(item => item.id === parseInt(res.data.rating_id))
this.customer.ratings = parseInt(this.customer.ratings.rating_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 )
);
【讨论】:
【参考方案2】:我不确定您所说的“...当我点击编辑时”是什么意思。但我假设您的意思是当您单击下拉菜单时。
根据您在 jsfiddle 中提供的内容,您的 v-select
应该是这样的:
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="ratings.text"
item-value="ratings"
single-line
></v-select>
这可以在 API 道具部分找到 here。
item-text
: 设置项目文本值的属性
item-value
: 设置物品属性值
文本就是你所看到的,我相信text
的当前值item-text
要么未定义,要么未声明。如果这个答案不起作用,那么您需要提供更多代码。
【讨论】:
喜梁诗林 没有它不工作.,....我试图找到我怎样才能给你完整的代码...你有什么想法吗? 这里是你可以在这个页面看到的完整代码github.com/Shakilzaman87/pukucrm/blob/master/src/components/…以上是关于v-select : 不能显示选中的元素的主要内容,如果未能解决你的问题,请参考以下文章