The issue I am facing here is that this.$refs.leaders is returning as undefined even if the value of reporting.type == 'yes' or this.$refs.opportunities is returning as undefined even if reporting.type == 'no'

this.$refs shows only reportingForm, no other component is shown there. Please help me find where I am going wrong

   <template>
      <div>
        <v-card>
          <v-form :model='reporting' ref='reportingForm'>
            
            <v-radio-group v-model="reporting.type"
                            :mandatory="true"
                            >
              <v-radio label="True" :value="'yes'" ></v-radio>
              <v-radio label='False' :value="'no'" ></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>

CodePudding user response：

Template refs are not bindings

Change

:ref="leaders

to

ref="leaders"