Issue

This Content is from Stack Overflow. Question asked by lai9fox

I get a Vue component like that:

<template>
  <div>
    <div>other things...</div>
    <FilterPopUp ref="filterPopUp">
      <FilterInput ref="filterInput"/>
    </FilterPopUp>
  </div>
</template>
<script>
import FilterPopUp from './filter-popup.vue';
import FilterInput from './filter-input.vue';
export deafult {
  name: 'Filter',
  components: {
    FilterPopUp,
    FilterInput,
  },
  method: {
    resetOptionStore() {
      // this.$refs.filterInput.resetFilter();
      console.log(this.$refs.filterPopUp);
      console.log(this.$refs.filterInput);
    },
  }
}
</script>

What I want to do is get access to FilterInput Component in resetOptionStore method, but I failed.

The actual value of this.$refs.filterInput is undefined, how can I work out this problem?

Solution

Ideally it should work, I just created a below working code snippet just for a demo. You can check and try to find the root cause by taking the reference.

Vue.component('child', {
  props: ['childmsg'],
  template: '<div>{{ childmsg }}<slot></slot></div>',
  methods: {
    call() {
        console.log('Child call');
    } 
  }
});

Vue.component('innerchild', {
  props: ['innerchildmsg'],
  template: '<li>{{ innerchildmsg }}</li>',
  methods: {
    call() {
        console.log('inner Child call');
    } 
  }
});

var app = new Vue({
  el: '#app',
  mounted() {
    console.log(this.$refs.childComponent.call());
    console.log(this.$refs.innerChildComponent.call());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child ref="childComponent" childmsg="This is a child message">
    <innerchild ref="innerChildComponent" innerchildmsg="This is a inner child message"></innerchild>
  </child>
</div>

This Question was asked in StackOverflow by lai9fox and Answered by Rohìt Jíndal It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.