Skip to content

v-slot to be used in case a slot prop is undefined error #10536

Open
@gongph

Description

@gongph

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

  1. open brower console
  2. 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' } }"

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions