vue
vue copied to clipboard
v-slot to be used in case a slot prop is undefined error
Version
2.6.10
Reproduction link
https://codepen.io/gongph/pen/bGbQLGE?editors=1010
Reproduction code at below:
Javascript:
Vue.component('current-user', {
data () {
return {
item: {
user: {
name: 'defualt name'
}
}
}
},
template: `
<div>
<slot v-bind="item"></slot>
</div>
`
})
new Vue({
el: '#app'
})
Html:
<div id="app">
<current-user v-slot="{ user }">
<!-- page print: `default name` -->
{{ user.name }}
</current-user>
<current-user v-slot="{ user = { name: 'gongph' } }">
<!-- page print: { 'name': 'default name' }-->
{{ user }}
</current-user>
</div>
Steps to reproduce
- open brower console
- console print [Vue warn] is :
[Vue warn]: Error compiling template:
invalid expression: Invalid shorthand property initializer in
v-slot="{ user = { name: 'gongph' } }"
What is expected?
if prop is undefined show gongph
value. for example:
Vue.component('current-user', {
data () {
return {
item: '' // item is undefined
}
},
template: `
<div>
<slot v-bind="item"></slot>
</div>
`
})
<current-user v-slot="{ user = { name: 'gongph' } }"
<!-- expected output `gongph` -->
{{ user.name }}
</current-user>
What is actually happening?
gongph
value can normal render , but console show warn message:
[Vue warn]: Error compiling template:
invalid expression: Invalid shorthand property initializer in
v-slot="{ user = { name: 'gongph' } }"
The default value passed via v-slot
does displays if no value is passed' but the error message shouldn't appear
I don't know why it show [Vue warn] @posva
I think this is already fixed with https://github.com/vuejs/vue/pull/9917 In fact I just tested this with a built version 2.6.11 and I see no warning
Note that argument defaults work only if the value is exactly undefined
. In your component you are setting it to ''
(an empty string) which is not undefined
.