Open steven-klein opened 1 month ago
3.4.32+
https://play.vuejs.org/#eNqFUslu2zAQ/ZUBL5IBRwKanlzZQFPkkAJd0OZWFoUgj1SmFElwUVwI+vcMKctZEDgnie/N8mbmjeyjMcUQkG1Y5RorjAeHPhiQteq2nHnH2Y4r0RttPYxgsYUJWqt7yCgtO1FXtcMbZYI/kkV5QmL97ANXXDVaOQ8ihW1jrTzLVlxV5dyaGtHDY29k7ZFeAJXZ3f43CDX0QXpxca/tHoZaBtxUpZlDHlsPF73eoyy8FT2JT404g3IpNY7H5tM0Z1flk25sTeOSxFZ0xZ3TinYyxkTOGt0bIdF+M17QCJxtIDGRq6XU958T5m3A9YI3f7H59wp+5w4R4+y7RYd2QM5OnK9th6Q40tc/v+KB/k8kjRYkRZ8hf6DTMkSNc9hVUHuS/SQuqb1JJxOqu3XXB4/KLUNFoTFySvGc0eE+nRn9Ue5l8T7lcTXRFp9d/g1nzZb4le62Bvq432SNPbZC4ZcIVo6uqbp17EdnpaQ8CaBiG8iHFWx3iyLRQh4rpPuvFhTIaD5YBUPCczJcBEnr/LOwywDnDUk+mi109BpNkr5kM09GjYOlyyTTvbTXnwFtXDbthDZWXL5j0wNI2SpB
Use defineModel with a modifier like trim applied in the set transformer. Bind the model to a text input and type a multi-word value into the input.
defineModel
trim
set
The trim modifier syncs the trimmed value back to the parent without updating the value attribute on the input.
value
The input value is also updated to the trimmed value, which prevents a user from adding spaces.
No response
Looking at commit de174e1 this may now be the expected behavior, but is a bit unintuitive given how v-model modifiers have worked in the past.
The documentation on modifiers and transformers appears to suggest that you should be able to apply a trim modifier in this manner.
a workaround
<input v-model.lazy="model" type="text" />
see Playground
edison1105
commented
1 month ago edison1105
commented
1 month ago
Vue version
3.4.32+
Link to minimal reproduction
https://play.vuejs.org/#eNqFUslu2zAQ/ZUBL5IBRwKanlzZQFPkkAJd0OZWFoUgj1SmFElwUVwI+vcMKctZEDgnie/N8mbmjeyjMcUQkG1Y5RorjAeHPhiQteq2nHnH2Y4r0RttPYxgsYUJWqt7yCgtO1FXtcMbZYI/kkV5QmL97ANXXDVaOQ8ihW1jrTzLVlxV5dyaGtHDY29k7ZFeAJXZ3f43CDX0QXpxca/tHoZaBtxUpZlDHlsPF73eoyy8FT2JT404g3IpNY7H5tM0Z1flk25sTeOSxFZ0xZ3TinYyxkTOGt0bIdF+M17QCJxtIDGRq6XU958T5m3A9YI3f7H59wp+5w4R4+y7RYd2QM5OnK9th6Q40tc/v+KB/k8kjRYkRZ8hf6DTMkSNc9hVUHuS/SQuqb1JJxOqu3XXB4/KLUNFoTFySvGc0eE+nRn9Ue5l8T7lcTXRFp9d/g1nzZb4le62Bvq432SNPbZC4ZcIVo6uqbp17EdnpaQ8CaBiG8iHFWx3iyLRQh4rpPuvFhTIaD5YBUPCczJcBEnr/LOwywDnDUk+mi109BpNkr5kM09GjYOlyyTTvbTXnwFtXDbthDZWXL5j0wNI2SpB
Steps to reproduce
Use
defineModelwith a modifier liketrimapplied in thesettransformer. Bind the model to a text input and type a multi-word value into the input.What is expected?
The trim modifier syncs the trimmed value back to the parent without updating the
valueattribute on the input.What is actually happening?
The input value is also updated to the trimmed value, which prevents a user from adding spaces.
System Info
No response
Any additional comments?
Looking at commit de174e1 this may now be the expected behavior, but is a bit unintuitive given how v-model modifiers have worked in the past.
The documentation on modifiers and transformers appears to suggest that you should be able to apply a trim modifier in this manner.