[英]passing a callback function via props to child component is undefined in child vue
我有一个Vue组件,它通过props将回调函数传递给另一个子组件。 但是,这是唯一在子级中未定义的部分。
我为此创建了一个存储库 ,以便可以查看文件。 在文件brDialog.vue中,我正在将按钮传递给函数click(),该函数应该可以访问从App.vue的props中传递的按钮回调,但是在brDialog中它是未定义的,而其他两件事随其传递存在(标签和数据)。
我将发布brDialog文件,并在需要时发布其他文件,但认为链接存储库比发布所有其他文件要容易。 我对Vue有点陌生,因此可能是文档中缺少的内容。
如果您运行仓库,然后单击标题中的“表单测试”按钮,那么问题就出在这里。
brDialog.vue
<template>
<v-container>
<v-layout row wrap>
<v-flex xs12>
<v-dialog
v-model="show"
width="500"
persistent
>
<v-card>
<v-card-title> {{ title }} </v-card-title>
<slot name="content"></slot>
<v-card-actions>
<v-btn
v-for="button in buttons"
:key="button.label"
small
@click.native="click(button)"
>
{{ button.label }}
</v-btn>
<v-btn
v-if="showCloseButton"
small
@click.native="closeDialog()"
>
{{ closeButtonLabel }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import { props } from './props.js'
export default {
name: 'brForm',
components: {
brTextField: () => import('@/controls/brTextField/brTextField.vue'),
brTextArea: () => import('@/controls/brTextArea/brTextArea.vue'),
brSelectList: () => import('@/controls/brSelectList/brSelectList.vue')
},
props: props,
data () {
return {
}
},
methods: {
async click (button) {
const response = await button.callback(button.data)
if (response.close) {
this.closeDialog()
}
},
closeDialog () {
this.$emit('close')
}
},
computed: {
}
}
</script>
<style>
</style>
也许这是我在Vue中缺少$ emit之类的东西,但似乎应该可以使用。 有人可以指出为什么将回调传递给brDialog后未定义吗?
callback
是不确定的,因为你定义你的data
有一个箭头的功能特性(App.vue从回购)和松散的Vue公司方面this
:
data: () => {
return {
testingForm: {
//...
dialog: {
props: {
buttonCallback: this.testingFormSave, //<-- here
buttons: [
{
label: 'Save',
data: {},
callback: this.testingFormSave //<-- and here
}
]
}
}
}
}
},
要解决您的问题,请将data: () => {...}
更改为data () {...}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.