передача функции обратного вызова через подпорки дочернему компоненту не определена в дочернем vue

Question

У меня есть компонент Vue, который передает функцию обратного вызова другому дочернему компоненту через реквизит.Тем не менее, это единственный фрагмент, который не определен в дочернем элементе.

Я создал репо для этого, чтобы можно было просмотреть файлы.В файле brDialog.vue я передаю кнопку функции click (), которая должна иметь доступ к обратному вызову кнопок, который был передан в реквизитах из App.vue, однако он не определен в 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>

Может быть, это что-то, чего мне не хватает с $ emit в Vue или что-то в этом роде, но, похоже, это должно работать.Кто-то может указать, почему обратный вызов не определен после передачи в brDialog?

Answer 1

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 () {...}