forms - Vue 反应式表单组件通信
问题描述
我有多个表单组件,每个表单都是一个组件。现在,我想使用相同的组件来添加数据和编辑数据。所以我想做的是,当 Post 组件收到一个包含数据的道具时,这意味着它处于“编辑模式”并用其数据填充字段,如果不是,它处于“创建模式”。那么我应该如何在我的表单域中使用 v-model 呢?
我是否应该将每个表单字段 v-model 为一个计算属性(它有一个 getter 和一个 setter),并且计算属性会检查 data prop 是否为空,如果不使用它的数据来填充字段?并在计算属性 set 方法中更新 prop ?
父组件
<post :data.sync="dataObject"></post>
子(帖子)组件
<template>
<div>
<form>
<input type="text" label="title" v-model="computedTitle" />
<input type="text" label="message" v-model="computedMessage" />
</form>
</div>
<input type="button" @click="submitted"
<template>
<script>
export default {
data(){
return{
post:{
title:null,
message:null
}
}
},
props:["data"],
computed:{
computedTitle:{
get(){
return data ? data.title : ''
},
set(computedTitle){
computedTitle = computedTitle // trying to update computed property value with the field value...
}
},
computedMessage:{...}
}
}
</script>
解决方案
您可以使用watch
检查data
道具,如果已设置则设置为局部post
变量。
- 如果已创建,
data
则为 null,post.title
并post.message
设置为 null - 如果更新,则不
data
为空,post.title
设置为data.title
和post.message
设置为data.message
<template>
<div>
<form>
<input type="text" label="title" v-model="post.title" />
<input type="text" label="message" v-model="post.message" />
</form>
</div>
<input type="button" @click="submitted"
<template>
<script>
export default {
data() {
return{
post: {
title: null,
message: null
}
}
},
props:["data"],
watch: {
data: {
handler(newData) {
if (newData) {
this.post = {
title: newData.title,
message: newData.message
}
}
},
immediate: true // this makes watch is called when component created
}
}
}
</script>
请注意,您应该使用immediate: true
在创建组件时调用手表的函数
推荐阅读
- javascript - 为什么`getBoundingClientRect`给我一个意想不到的结果
- json - 包含 JSON 中键值对的键值对?
- java - JavaFX DatePicker:可以只有年和月,没有天吗?
- docker - 用于 apache zookeeper 的 Dockerfile,但在运行其容器时发生错误
- javascript - 如何使用特殊字符解构 JS 中的字符串?
- uiviewcontroller - 日期选择器在 UIKit 中不对齐
- ios - Flutter CocoaPods 找不到兼容版本:Cache 和 BetterPlayer
- python - Pandas:AttributeError:“float”对象没有属性“MACD”
- windows - Windows Server 2016 密码哈希
- flutter - 容器的动态大小 - Flutter