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"