Question

我正在使用动态表格来分解一个长表格。在每个动态表单下都有两个操作按钮，单击它们后，会将用户发送回一个表单集或发送到下一个表单集（除非到达表单末尾-“下一步”按钮替换为“提交”按钮）。

由于我有三种使用相同动作按钮的不同形式，因此我决定为动作按钮创建一个子组件（“ ActionButtons”）-为此，我已经从可以工作的代码转变为不起作用的代码。 t。

具体来说，我在控制“下一步”按钮时遇到的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

但结果保持不变。我要去哪里错了？

谢谢，汤姆。

父子组件之间的$ ref问题

0 个答案: