如何将数据传递到子组件中，显示在输入字段中，然后能够提交编辑后的输入？（视点）

Question

我仍在学习 Vuejs，非常感谢您的帮助！
这是我父组件的一部分（table 每行都有重复的研讨会）。车间数据是使用 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" 就可以做到这一点。但是，我也想要编辑输入字段并能够提交表单，随后将数据发送到服务器，因此只有两个-way 绑定能够工作，因此使用 v-model。如代码中所示，我尝试使用 mounted() 但它无法工作（this.workshopItem 为空）。我还使用了 beforeUpdate() 并且它能够在输入字段中显示文本值，但是当我尝试编辑输入字段时，我无法这样做。我迷路了，我希望得到一些关于我应该怎么做才能得到我想要的结果的指示。

Answer 1

第一个：

if (this.workshop) {

没有在任何地方定义，也没有在 props 中，也没有在数据中定义，所以它将是未定义的。

然后，对于您想要的模式，最好的解决方案是使用 getter 和 setter 的计算属性。看这里：

https://vuejs.org/v2/guide/computed.html#Computed-Setter

Answer 2

你的问题是你的模式组件已经被渲染并且计算和创建的钩子只被触发一次。为了解决这个问题，每次 prop 发生变化时 workShopItem 然后创建一个单独的方法来在 prop 发生变化后初始化子组件的属性

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 改变时，您的子组件的属性都会相应更新。

干杯！

如何将数据传递到子组件中，显示在输入字段中，然后能够提交编辑后的输入？（视点）

How to pass data into child component, display in input field, and subsequently be able to submit the edited input? (Vue)

vue.js

vuex

如何将数据传递到子组件中，显示在输入字段中，然后能够提交编辑后的输入？ （视点）

How to pass data into child component, display in input field, and subsequently be able to submit the edited input? (Vue)

vue.js

vuex

如何将数据传递到子组件中，显示在输入字段中，然后能够提交编辑后的输入？（视点）