Returned ref stays null if it's connected to a conditionally shown slot #296
Description
Here is a problem: barRef is always null, although getCurrentInstance().$refs.barRef is not.
- open the codesandbox example
- wait for 4 seconds so the bar component is rendered.
- wait for 10 seconds and then click on the
getbarbutton - look at the console. you will get null and ref value. which is bad, cause it should be ref-value in both logs.
Here what I did:
I create a foo component that do calculations, and when the calculations are done it need to render whatever inside the slot. (not before) by using v-if.
In the component that host the foo component, I need to access the component inside (where the slot content) by click on button event.
I wait for 10 seconds and click on the button. (because after ten seconds, the component should be rendered and available on the dom).
but when I console.log the barRef I get null, and when I console.log the getCurrentInstance().$refs.barRef I get the ref.
The code:
import Vue from "vue";
import VueCompositionApi, { getCurrentInstance } from "@vue/composition-api";
import { ref } from "@vue/composition-api";
import VueRouter from "vue-router";
Vue.use(VueCompositionApi);
Vue.use(VueRouter);
const foo = {
template: `
<div>
<h3>im foo</h3>
<slot v-if="showSlot"></slot>
</div>
`,
setup() {
const showSlot = ref(false);
setTimeout(() => {
showSlot.value = true;
}, 4000);
return { showSlot };
}
};
Vue.component("foo", foo);
const bar = {
template: `
<div>
<h4>im bar</h4>
</div>
`
};
Vue.component("bar", bar);
const App = {
template: `
<div>
<h1>im app</h1>
<foo>
<bar ref="barRef"></bar>
</foo>
<button @click="getBar">getBar</button>
</div>
`,
setup() {
const barRef = ref(null);
const vm = getCurrentInstance();
function getBar() {
console.log({ barRef: barRef.value });
console.log({ vm$refsbarRef: vm.$refs.barRef });
}
return { barRef, getBar };
}
};
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");