vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Home Page:https://vuejs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

v-model修饰符在初始化的时候不生效,只有当v-model绑定的值发生变化时才生效。

zhengyanbin-yy opened this issue · comments

Vue version

3.4.21

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-pzra6q?file=src%2FApp.vue&terminal=dev

Steps to reproduce

组件v-model的trim修饰符和自定义修饰符 capitalize 在初始化的时候没有生效,只有绑定的值发生变化的时候才生效。

What is expected?

v-model的修饰符在初始化的时候也要生效

What is actually happening?

初始化的时候修饰符没有生效,只有绑定的值发生变化时才生效。

System Info

No response

Any additional comments?

No response

看上去是符合预期的,set处理函数在值发生更新时触发。如果你希望初始化时生效,你应该再添加get函数,在get中处理修饰符

看上去是符合预期的,set处理函数在值发生更新时触发。如果你希望初始化时生效,你应该再添加get函数,在get中处理修饰符

首先新增get函数,只会更改子组件中的值,父组件中的值仍然是在 v-model 绑定的值发生变化后才会生效。
其次,如果要增加get才能达到目的,那自带的修饰符怎么办?比如:我在v-model用了自带的 .trim .number。初始化的时候这两个自带的修饰符也不生效

有道理,或许可以新增一个immediate的option参数

option

immediate 这个参数是watch里面的吧。v-model 的参数类型是 PropOptions。PropOptions里面没有 immediate 这个配置项吧。

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 也是语法糖,那和上面代码一样,初始化text时,input是不会触发的,在设计响应式时其实就遵循了这一点,只有当值改变时,才会有相应操作。

image

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 也是语法糖,那和上面代码一样,初始化text时,input是不会触发的,在设计响应式时其实就遵循了这一点,只有当值改变时,才会有相应操作。

image

按照你的逻辑,只有当值改变时才触发。那么我组件defineModel 时传进去 默认值 参数。

defineModel({
default:'55555'
})

这不在初始化时也生效了吗?default参数能生效。我加的 修饰符 在初始化的时候就不能生效?修饰符也可以看成参数吧?