vue.js - 父子组件之间的 $ref 问题

Question

我正在使用动态表单来分解长表单。在每个动态表单下方是两个操作按钮，单击这些按钮时，会将用户发送回一组表单集或发送到下一个表单集（除非已到达表单末尾 - “下一步”按钮被“提交”按钮替换） .

因为我有三种不同的表单都使用相同的操作按钮，所以我决定为操作按钮创建一个子组件（'ActionButtons'）——这样做我已经从有效的代码变成了无效的代码。

具体来说，我ref在控制“下一步”按钮所涉及的信息方面遇到问题。错误信息是Error in nextTick: "TypeError: Cannot read property '$v' of undefined"

运行良好的代码（即在我创建“ActionButtons”之前）是：

<template>
    ...
    <keep-alive>
        <component
            ref="currentStep"
            :is="currentStep"
            @update="processStep"
            :wizard-data="formvars"
        ></component>
    </keep-alive>
    ...
    <button
        @click="nextButtonAction"
        :disabled="!canGoNext"
        class="btn"
    >{{isLastStep ? 'Submit' : 'Next'}}</button>
    ...
</template>

<script>

  import Gap2InputInfo from './Gap2InputInfo'
  import Gap2Materials from './Gap2Materials'

  export default {
    name: 'GAP2Form',
    components: {
      Gap2InputInfo,
      Gap2Materials
    },
    data () {
      return {
        currentStepNumber: 1,
        canGoNext: false,
        wizardData: {},
        steps: [
          'Gap2InputInfo',
          'Gap2Materials',
        ],
        formvars: {
          id: 0,
          purchase: null,
          name: null,
          quantity: null,
          supplier: null,
          nsteps: 0
        },
        updatedData: null
      }
    },
    computed: {
      isLastStep () {
        return this.currentStepNumber === this.length
      },
      length () {
        this.formvars.nsteps = this.steps.length;
        return this.steps.length
      },
      currentStep () {
        return this.steps[this.currentStepNumber - 1];
      },
    },
    methods: {
      nextButtonAction () {
        if (this.isLastStep) {
          this.submitForm()
        } else {
          this.goNext()
        }
      },
      processStep (step) {
        Object.assign(this.formvars, step.data);
        this.canGoNext = step.valid
      },
      goBack () {
        this.currentStepNumber--;
        this.canGoNext = true;
      },
      goNext () {
        this.currentStepNumber++;
        this.$nextTick(() => {
          this.canGoNext = !this.$refs.currentStep.$v.$invalid
        })
      }
    }
  }
</script>

在创建子组件时，我将以下道具发送给子组件

<action-buttons :currentStepNumber="currentStepNumber" :canGoNext="canGoNext" :isLastStep="isLastStep" :currentStep="currentStep"></action-buttons>

并将与按钮操作相关的方法从父组件移至子组件。

我的子组件是：

<template>
  <div>
    <div id="actions" class="buttons">
      <button
          @click="goBack"
          v-if="mcurrentStepNumber > 1"
          class="btn-outlined"
      >{{$t('back')}}
      </button>
      <button
          @click="nextButtonAction"
          :disabled="!canGoNext"
          class="btn"
      >{{isLastStep ? 'Submit' : 'Next'}}</button>
    </div>

  </div>
</template>

<script>
  import {required} from 'vuelidate/lib/validators'
  export default {
    name: "ActionButtons",
    props: ['currentStepNumber','canGoNext','isLastStep','currentStep'],
    data: function () {
      return {
        mcurrentStepNumber: this.currentStepNumber,
        mcurrentStep: this.currentStep,
        mcanGoNext: this.canGoNext,
        misLastStep: this.isLastStep
        }
    },
    methods: {
      nextButtonAction () {
        if (this.misLastStep) {
          this.submitForm()
        } else {
          this.goNext()
        }
      },
      goBack () {
        this.mcurrentStepNumber--;
        this.mcanGoNext = true;
      },
      goNext () {
        this.mcurrentStepNumber++;
        this.$nextTick(() => {
          this.mcanGoNext = !this.$refs.currentStep.$v.$invalid    **** Error triggered at this line
        })
      }

    }
  }
</script>

现在，当我单击“下一步”按钮时，我收到Cannot read property '$v' of undefined错误消息。如果我解释正确，它就无法读取 $refs 数据。我尝试将子组件中的代码更改为

this.mcanGoNext = !this.$parent.$refs.currentStep.$v.$invalid 

但结果还是一样。我哪里错了？

谢谢，汤姆。

标签： vue.js