Question

我有多个表单组件，每个表单都是一个组件。现在，我想使用相同的组件来添加数据和编辑数据。因此，我想做的事情就像是Post组件收到包含数据的道具，这意味着它处于“编辑模式”，并使用其数据填充字段，如果不是，则处于“创建模式”。那么我应该如何在表单字段中使用v-model？

我是否应该将每个表单字段v建模为一个计算属性（具有getter和setter），并且计算属性将检查data 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>

Answer 1

您可以使用watch来检查data属性（如果已设置），然后将其设置为局部post变量。

如果创建，则data为空，post.title和post.message设置为空
如果已更新，则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来调用手表的功能

Vue反应形式组件沟通

1 个答案: