refs 返回为未定义

Question

我在这里面临的问题是，即使 reporting.type == 'yes' 或 this.$refs.leaders 的值返回为未定义， code>this.$refs.opportunities 即使 reporting.type == 'no'

也会返回未定义

this.$refs 仅显示 reportingForm，不显示其他组件。请帮我找出哪里出错了

<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

模板引用不是绑定

改变

:ref="leaders

至

ref="leaders"