vue icon indicating copy to clipboard operation
vue copied to clipboard

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

Open gongph opened this issue 4 years ago • 7 comments

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' } }"

gongph avatar Sep 20 '19 06:09 gongph

The default value passed via v-slot does displays if no value is passed' but the error message shouldn't appear

posva avatar Sep 20 '19 07:09 posva

I don't know why it show [Vue warn] @posva

gongph avatar Sep 20 '19 07:09 gongph

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

albertodeago avatar Jan 27 '20 20:01 albertodeago

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.

sirlancelot avatar Jan 27 '20 20:01 sirlancelot