我正在使用Vue-Multiselect插件,并尝试向父组件发送一些数据,以便后端API可以更新一些记录,但我不知道如何成功完成此操作。
这里是我使用CodeSandBox Demo进行的尝试(以及更详细的解释)注意:要查看运行中的多选UI,请转至POST-> ACME WIDGET,然后单击“编辑”,您可以在其中使用多选插件。
在我的子组件CustomerPOCSelect.vue
中,存在一个onRemove
事件,该事件将某些数据推入名为pocsToRemove
的数组中。同样,有一个onSelect
事件,该事件还将一些数据压入一个名为pocsToAdd
的数组中。
但是,我不确定如何从此点到达父级EditPost.vue
,因此我可以使用父级onSubmitUpdate
的事件并对服务器进行实际更新。每次用户更改多选输入(无论是删除还是添加)并单击UPDATE POST按钮时,我都需要将发出的数据传递给onSubmitUpdate方法。
EditPost.vue
<template> <div> <label>Point of Contacts:</label> <multiselect v-model="value" :options="options" label="lastname" placeholder="plaeholder text" track-by="uid" :loading="isLoading" :custom-label="selectedNameLabel" selectLabel :multiple="true" @remove="onRemove" @select="onSelect" > <template slot="singleLabel" slot-scope="props" >{{ props.option.lastname }}, {{props.option.firstname}}</template> <template slot="option" slot-scope="props"> <strong>{{ props.option.lastname }}</strong> , {{ props.option.firstname }} — <small>{{ props.option.email }}</small> </template> </multiselect> <!-- <small id="searchHelpBlock" class="form-text text-muted"><font-awesome-icon icon="exclamation-circle" /> If customer does not exist, you will be prompted to add a new customer</small> --> <!-- <h3>New contacts to be added:</h3> <ul> <li v-for="value in values" :key="value.uid">{{value.lastname}}, {{value.firstname}}</li> </ul>--> </div> </template> <script> import Multiselect from "vue-multiselect"; // import ApiService from "@/apiService"; export default { components: { Multiselect }, props: ["users", "post", "contacts"], data() { return { value: this.contacts, options: this.users, isLoading: true, pocsToRemove: [], pocsToAdd: [] }; }, created() { this.isLoading = false; }, methods: { selectedNameLabel(option) { return `${option.lastname}, ${option.firstname} -- ${option.email}`; }, onRemove(option) { this.pocsToRemove.push(Number(option.uid)); }, onSelect(option) { this.pocsToAdd.push(Number(option.uid)); } } }; </script>
CustomerPOCSelect.vue
<template> <div> <form @submit.prevent="onSubmitUpdate" v-if="!$route.params.addPost"> <h3>Update Post</h3> <div> <label for="product_name_input">Post Name:</label> <br> <input type="text" v-model="post.post_name" id="post_name_input" required> </div> <br> <br> <CustomerPOCSelect :users="userProfiles" :post="post" :contacts="contacts"/> <br> <button type="submit" v-if="!loading">Update Post</button> <button type="button" disabled v-if="loading"> <span role="status" aria-hidden="true"></span> Updating... </button> <button @click.prevent="cancelEdit">Cancel Edit</button> </form> <form v-if="$route.params.addPost"> <h3>Add New Post</h3> <div> <label for="product_name_input">Post Name:</label> <br> <input type="text" v-model="post.post_name" id="post_name_input" required> </div> <br> <button type="submit" v-if="!loading">Add Post</button> <button type="button" disabled v-if="loading"> <span role="status" aria-hidden="true"></span> Adding... </button> <button @click.prevent="cancelEdit">Cancel Edit</button> </form> </div> </template> <script> import CustomerPOCSelect from "@/components/CustomerPOCSelect.vue"; export default { props: ["id"], components: { CustomerPOCSelect }, data() { return { post: { post_name: "", post_id: null, poc_list: [] }, posts: [ { post_id: 1, process_id: 4, post_name: "ACME Widget", poc_list: [1, 2] }, { post_id: 2, process_id: 1, post_name: "XYZ Widget", poc_list: [3] }, { post_id: 3, process_id: 2, post_name: "ABC Bar", poc_list: [] }, { post_id: 4, process_id: 3, post_name: "Foo Bar", poc_list: [1, 3] } ], userProfiles: [ { uid: "1", firstname: "Claiborne", lastname: "Heberden", email: "[email protected]" }, { uid: "2", firstname: "Gerick", lastname: "Tetla", email: "[email protected]" }, { uid: "3", firstname: "Raymund", lastname: "Espy", email: "[email protected]" }, { uid: "4", firstname: "Dilly", lastname: "Dimitriev", email: "[email protected]" }, { uid: "5", firstname: "Roby", lastname: "Tabner", email: "[email protected]" }, { uid: "6", firstname: "Jeff", lastname: "Smith", email: "[email protected]" }, { uid: "7", firstname: "Damn", lastname: "Man", email: "[email protected]" } ], loading: false, btnDisable: true }; }, created() { this.populateFields(); }, methods: { populateFields() { // this.post.post_id = this.$route.params.addPost // ? null // : this.$route.params.post_id; this.post.post_name = this.$route.params.addPost ? "" : this.$route.params.post_name; this.post.poc_list = this.$route.params.addPost ? null : this.$route.params.poc_list; }, removePOC(x) { this.post.poc_list.push(x); }, // onSubmitUpdate() { // this.loading = true // ApiService.updatePost(this.post) // .then(() => { // this.loading = false // this.$router.push({ path: '/' }) // }) // .catch(err => { // if (err.response) { // this.errors = err.response.data // } else { // if (err.request) { // this.errors = err.request // } else { // this.errors = err.message // } // } // this.loading = false // console.error('Error from update', err) // }) // }, cancelEdit() { this.$router.push({ path: "/posts" }); } }, computed: { contacts() { const post = this.posts.find(post => post.post_id === this.id); // all user names return this.userProfiles.filter(user => { return post.poc_list && post.poc_list.includes(Number(user.uid)); }); } } }; </script>
我正在使用Vue-Multiselect插件,并尝试向父组件发送一些数据,以便后端API可以更新一些记录,但是我不知道如何成功完成此操作。这是我的尝试(...
您可以为此使用Vuex
或自定义事件