我仍在學習 Vuejs，我真的很感激一些幫助！
這是我的父組件的一部分（每行都有一個迭代研討會的表格）。車間資料是使用 Vuex 從資料庫中獲取的。
EditWorkshop 是我的子組件。我在每一行都有一個按鈕，我可以點擊它打開模態（子組件），其中包含通過使用道具從父組件傳遞到子組件的資訊（關于該特定行中的一個特定車間），以及它在子組件中稱為“workshopItem”。
<tr v-for="item in workshop" :key="item.id">
<td>{{ item.title }}</td>
<td>{{ item.description }}</td>
<td>{{ item.venue }}</td>
<td><button @click="openEdit(item)">Edit</button></td>
<EditWorkshop :workshopItem="modalData" v-show="editVisible" @close="closeEdit"/>
</tr>
<script>
import { mapGetters, mapActions } from 'vuex';
import EditWorkshop from './EditWorkshop.vue'
export default {
data() {
return {
editVisible: false,
modalData: null,
}
},
components: {
EditWorkshop
},
computed: {
...mapGetters(['workshop'])
},
methods: {
...mapActions(['getWorkshop']),
openEdit(item) {
this.modalData = item;
this.editVisible = true;
},
closeEdit() {
this.editVisible = false;
}
},
created() {
this.getWorkshop()
}
}
</script>
這是我的子組件：
Title: <input type="text" v-model="title">
Description: <input type="textarea" v-model="description">
Venue: <input type="text" v-model="venue">
export default {
data() {
return {
title: '',
description: '',
venue: ''
}
},
props: ['workshopItem'],
methods: {
close() {
this.$emit('close')
}
},
mounted() {
if (this.workshopItem) {
this.title = this.workshopItem.title
this.description = this.workshopItem.description
this.venue = this.workshopItem.venue
}
}
}
我的問題是：我想讓輸入欄位顯示 WorkshopItem 的屬性，如果我:value="workshopItem.title"在輸入欄位中進行單向系結，我可以做到這一點。但是，我也想編輯輸入欄位并能夠提交表單，然后將資料發送到服務器，因此只能進行雙向系結，因此使用v-model。如代碼所示，我嘗試使用mounted()，但無法作業（this.workshopItem 為空）。我還使用了 beforeUpdate() 并且它能夠在輸入欄位中顯示文本值，但是當我嘗試編輯輸入欄位時，我無法這樣做。我迷路了，我希望得到一些關于我應該怎么做才能得到我想要的結果的指示。
uj5u.com熱心網友回復：
第一的：
if (this.workshop) {
沒有在任何地方定義，也沒有在 props 中定義，也沒有在 data 中定義，所以它將是未定義的。
然后，對于您想要的模式，最好的解決方案是使用帶有 getter 和 setter 的計算屬性。看看這里：
https://vuejs.org/v2/guide/computed.html#Computed-Setter
uj5u.com熱心網友回復：
您的問題是您的模態組件已經呈現，并且計算和創建的掛鉤僅觸發一次。為了解決這個問題，每次道具改變時workShopItem，然后創建一個單獨的方法來初始化你的子組件的屬性，一旦道具改變
props: ['workShopImte'],
methods: {
initialize() {
if (this.workshop) {
this.title = this.workshopItem.title
this.description = this.workshopItem.description
this.venue = this.workshopItem.venue
}
}
},
watch: {
workShopItem: {
handle() {
this.initialize()
},
immediate: true
}
}
這樣每次 prop 改變時，你的子組件的屬性都會相應地更新。
干杯!
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/381416.html
上一篇：Vuejs。更新時更新資料（）