refs est renvoyé comme non défini

Question

Le problème auquel je suis confronté ici est que même reporting.type == 'yes' 或 this.$refs.leaders 的值返回为未定义， code>this.$refs.opportunities 即使 reporting.type == 'no'

renvoie un résultat indéfini

this.$refs 仅显示 reportingForm, aucun autre composant n'est affiché. S'il vous plaît, aidez-moi à comprendre où je me trompe

<template>
      <div>
        <v-card>
          <v-form :model='reporting' ref='reportingForm'>
            
            <v-radio-group v-model="reporting.type"
                            :mandatory="true"
                            class="referral-radios">
              <v-radio label="True" :value="'yes'" class="referral-radio"></v-radio>
              <v-radio label='False' :value="'no'" class="referral-radio"></v-radio>
            </v-radio-group>
          </v-form>
        </v-card>
        <div>
          <LeadsResults v-if="reporting.type == 'yes'"
                        :ref="leaders">
          </LeadsResults>
          <OpportunitiesResults
                        v-if="reporting.type == 'no'"
                        :ref="opportunities">
    
          </OpportunitiesResults>
        </div>
      </div>
    </template>
    
    <script>
    import LeadsResults from 'views/leads_results.vue'
    import OpportunitiesResults from 'views/opportunities_results.vue'
    export default {
      components: {
        LeadsResults,
        OpportunitiesResults,
      },
      data () {
        return {
          reporting: {
            type: ''
          }
        }
      },
      watch: {
        'reporting.type': function (value) {
          if (value == 'yes') {
            console.log(this.$refs.leaders)
            //undefined
          }
          else if (value == 'no') {
            console.log(this.$refs.opportunities)
            //undefined
          }
        }
      }
    };
    </script>

Answer 1

La référence du modèle n'est pas contraignante

Changement

:ref="leaders

à

ref="leaders"