没有从子数据传递给父道具的数据

Question

我有一个请求表单组件，在这个请求表单组件中我有一个下拉菜单组件，我将在下面链接两者。在点击Submit按钮时，表中的所有值都被推入对象中。然而，我的下拉选择只被我的console.log拾取，而不是被推入对象。

我不太熟悉Vue，所以我不确定修复这个问题的方向。我将在下面附上相关的(?)代码片段。

父组件:

<SelectComponent :selected="this.selected" @change="updateSelectedValue" />

export default {
fullScreen: true,
name: 'CcRequestForm',
mixins: [BaseForm],
name: "App",
components: {
SelectComponent,
},
data() {
return {
selected: "A",
};
},
props: {
modelName: {
default: 'CcRequest',
},
parentId: {
type: Number,
default: null,
},
},
mounted() {
this.formFields.requester.value = this.currentRequesterSlug;
},
destroyed() {
if (!this.modelId) return;
let request = this.currentCcRequest;
request.params = request.params.filter(p => p.id)
},
computed: {
...mapGetters(['ccTypesForRequests', 'currentRequesterSlug', 'currentCcRequest']),
ccTypesCollection() {
return this.ccTypesForRequests.map((x)=>[x.slug, this.t(`cc_types.${x.slug}`)]);
}
},
methods: {
addParam() {
this.addFormFields(['params'], {
slug: '',
name: '',
isRequired: true,
description: '',
typeSlug: '',
selected: ''
});
},
deleteParam(idx){
this.removeFormFields(['params', idx]);
},
restoreParam(idx){
this.restoreFormFields(['params', idx])
},
$newObject() {
return  {
slug: '',
name: '',
isAbstract: false,
requester: '',
description: '',
status: 'inactive',
params: [],
selected: ''
};
},
$extraPrams() {
return {
parentId: this.parentId,
};
},
updateSelectedValue: function (newValue) {
this.selected = newValue;
},
},

watch: {
selected: function (val) {
console.log("value changed", val);
},
},
};

子组件:

<script>
export default {
name: "SelectComponent",
props: {
selected: String,
},
computed: {
mutableItem: {
get: function () {
return this.selected;
},
set: function (newValue) {
this.$emit("change", newValue);
},
},
},
};

Answer 1

您必须在父组件中定义emit属性，否则它将不知道该期待什么。它看起来像:

<SelectComponent :selected="this.selected" @update-selected-value="updateSelectedValue" />

查看本教程获取更多信息:https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation

Answer 2

要更新对象中的选定属性，在这个星座中，您需要在收到事件时手动更新updateSelectedValue方法中的对象属性。另一种方法是创建一个computed属性，因为它是响应性的，包装上"selected";财产。

computed: { 
selectedValue () {
return this.selected
}
}

在对象内部，使用selectedValue而不是selected:

return  {
...
selected: selectedValue
}