text is undefined error with hydrated slotted component with default slot contents using bound computed properties #1144
Description
The setup is as convoluted as the title suggests, ha. I'm trying to do something pretty stupid, so I'm not exactly surprised that things break, but I found it interesting it seems to happen only when all of these conditions are met.
Essentially, I'm trying to duplicate Vue's scoped slots using a bound property. The parent renders a slotted component, passing in data and receiving some transformed data back using a bound property. The slotted component has some default content which is being overridden from the parent, but both contents are rendered using the same computed value.
This all works in a normal component, but it breaks when the component is hydrated after being server rendered. As such, if using Sapper you navigate to the page, everything works, but if you reload the page it breaks. Additionally, if the slotted child doesn't have any default content, everything works fine as well.
(That HMR error is unrelated, the same thing happens when running in production mode).
Parent:
<Layout page='about'>
<Slotted num="{{num}}" bind:computedNum="computedNum">
<p style="color: red;">
{{computedNum}}
</p>
</Slotted>
</Layout>
<script>
import Layout from './_components/Layout.html';
import Slotted from './_components/Slotted.html';
export default {
data() {
return {
num: 1
};
},
components: {
Layout,
Slotted
}
};
</script>Slotted child:
<select bind:value="someState">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<slot>
<span>{{computedNum}}</span>
</slot>
{{someState}}
<script>
export default {
data() {
return {
someState: 'a'
};
},
computed: {
computedNum(num, someState) {
if (!num)
return;
return `${someState}:${num}`;
}
}
};
</script>Thanks!