VU реактивные формы компонентов связи

Question

У меня есть несколько компонентов формы, каждая форма как компонент.Теперь я хочу использовать один и тот же компонент для добавления данных и редактирования данных.Так что я думаю сделать что-то вроде того, когда компонент Post получает реквизит, содержащий данные, что означает, что он находится в «режиме редактирования» и заполняет поля своими данными, если нет - в «режиме создания».Так как мне использовать v-модель в моих полях формы?

Должен ли я v-моделировать каждое поле формы для вычисляемого свойства (которое имеет геттер и установщик), и вычисляемое свойство будет проверять, является ли реквизит данных пустым, и если не использовать свои данные для заполнения полей?А в методе набора вычисляемых свойств для обновления реквизита?

родительский компонент

<post :data.sync="dataObject"></post>

дочерний (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 prop, если он установлен, затем установить локальную переменную 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 для вызова функции часов при создании компонента