Vue.js3：如何使用道具預填充系結表單

我正在嘗試使用 Vuejs 3 創建一個簡單的 CRUD 應用程式。

我有一個帶有表單（作為子組件）的主頁和一個帶有已創建專案的表（作為另一個子組件）。我通過表單將資料提交到 API/資料庫并更新表格。到目前為止，一切都很好。

然后，對于更新階段，我希望每個專案都有一個詳細資訊頁面，我也將在其中擁有表單（重復使用相同的組件）。但想法是表單欄位將預先填充來自 API/資料庫的資料。

主頁上的表格有route-link一個詳細資訊頁面，我將id專案的params. 詳情頁基于 向 API 發出請求id，接收商品資料并將其傳遞給props表單組件。

如果我嘗試像這樣將資料直接渲染到模板中，它可以正常作業：

<p v-if="submitType === 'update' && item.id">{{ item.id }}</p>

現在，表單欄位被系結v-model到data（form.id例如）。但是當我嘗試如下重新填充它時，我總是得到未定義的值。

  data() {
    return {
      form: {
        id: this.submitType === 'update' ? this.item.id : 0,
      }
    }
  },

我懷疑問題在于對 API 的父呼叫是異步的，并且傳遞props被延遲。因為當我作為props一些硬編碼值傳遞時，它在表單欄位中顯示為一個值，沒有問題。此外，如果表單僅在props收到時顯示（使用v-if指令），data.form.id則仍然未定義。

那么有什么方法可以使用接收到的道具預先填充系結的表單欄位，并且仍然可以將表單組件重用于插入和更新操作？其余相關代碼如下。非常感謝您提前

// Detail Page
<template>
  <Form :item="item" submit-type="update"></Form>
</template>

<script>
export default {
  data() {
    return {
      item: {}
    }
  },
  created() {
    callAPI(id).then( response => this.item = response.data )
  }
}
</script>

// Form Component
<template>
  <p v-if="submitType === 'update' && item.id">{{ item.id }}</p>

  <div v-if="submitType === 'insert' || (submitType === 'update' && item.id )">
    <section>
      <form @submit.prevent="onSubmit">

        <div>
          <label for="id">ID</label>
          <input id="id" name="id" v-model="form.id"  type="number" placeholder="ID">
        </div>

        <input type="submit" value="Save">

      </form>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Form',
  props: {
    item: {
      type: Object
    },
    submitType: {
      type: String
    }
  },
  data() {
    return {
      form: {
        id: this.submitType === 'update' ? this.item.id : 0,
      }
    }
  },
}
</script>

uj5u.com熱心網友回復：

您可以嘗試使用觀察者，查看以下代碼段：

const app = Vue.createApp({
  data() {
    return {
      item: {},
      type: 'update'
    }
  },
  methods: {
    change() {
      this.type === 'update' ? this.type = 'insert' : this.type = 'update'
    }
  },
  created() {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => this.item = json)
    //callAPI(id).then( response => this.item = response.data )
  }
})
app.component('myForm', {
  template: `
  <p v-if="submitType === 'update' && item.id">{{ item.id }}</p>
  <div v-if="submitType === 'insert' || (submitType === 'update' && item.id )">
    <section>
      <form @submit.prevent="onSubmit">
        <div>
          <label for="id">ID</label>
          <input id="id" name="id" v-model="form.id"  type="number" placeholder="ID">
        </div>
        <input type="submit" value="Save">
      </form>
    </section>
  </div>
  `,
  props: {
    item: {
      type: Object
    },
    submitType: {
      type: String
    }
  },
  data() {
    return {
      form: {}
    }
  },
  methods: {
    fillData() {
      this.submitType === 'update' ? this.form = {...this.item} : this.form = {id: 0}
    }
  },
  watch: {
    item() {
      this.fillData()
    },
    submitType() {
      this.fillData()
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="change">switch type</button>
  {{type}}
  <my-form :item="item" :submit-type="type"></my-form>
</div>

標籤：javascript Vue.js Vue组件 Vuejs3 Vue 道具

上一篇：將Vue資料傳遞到Ejsinclude()

下一篇：如何在URL中創建沒有ID的Nuxt動態路由