vuetify3中v-list的v-model:selected双向绑定用法


官方文档:https://vuetifyjs.com/zh-Hans/api/v-list/

​vuetify3 取消了 v-list-item-group 这个标签,在 v-list 上添加了双向绑定的API
我一用发现不能生效,我是这么写的

<v-list v-model="select">
	<v-list-item value="name1"> </v-list-item>
	<v-list-item value="name2"> </v-list-item>
	<v-list-item value="name3"> </v-list-item>
<v-list>

直接读 v-model 属性在 v-chip-group 上是可以生效的,但这个方法并不适用于 v-list
我在官方discord频道中进行询问,得到了答案
v-list 的官方API文档是这么写的
在这里插入图片描述
翻译过来就是:一个数组,包含了当前选中的 item 的值。可以与 v-model:selected 双向绑定。
所以正确的写法应该是这样

<v-list v-model:selected="playerSelect">
	<v-list-item value="name1"> </v-list-item>
	<v-list-item value="name2"> </v-list-item>
	<v-list-item value="name3"> </v-list-item>
<v-list>

这里 playerSelect 的值,对应选中的 item 的 value 属性

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
回答: 在Vue.js,v-model指令可以用于在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。这样,当用户在表单元素输入内容时,数据会自动更新,同时当数据发生变化时,视图也会相应地更新。\[3\]v-model本质上是语法糖,它负责监听用户的输入事件以更新数据,并对一些特殊场景进行处理。需要注意的是,v-model会忽略表单元素的value、checked、selected特性的初始值,而总是将Vue实例的数据作为数据来源。因此,在组件的data选项需要声明初始值。\[3\] 在实际应用,可以通过在表单元素上使用v-model指令来实现双向数据绑定。例如,在一个文本输入框,可以使用v-model来绑定一个数据属性,当用户在输入框输入内容时,数据属性会自动更新,同时当数据属性发生变化时,输入框的内容也会相应地更新。\[1\]例如,在Vue.js的代码示例,通过v-model指令将输入框与message属性进行了双向绑定,当用户在输入框输入内容时,message属性会自动更新,同时当message属性发生变化时,输入框的内容也会相应地更新。\[1\] #### 引用[.reference_title] - *1* *2* *3* [[Vue]3.双向绑定](https://blog.csdn.net/weixin_46285081/article/details/121340612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值