Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gongph opened this issue Sep 20, 2019 · 7 comments
Open

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

gongph opened this issue Sep 20, 2019 · 7 comments

Comments

@gongph
Copy link

gongph commented Sep 20, 2019

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' } }"
@posva
Copy link
Member

posva commented Sep 20, 2019

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

@gongph
Copy link
Author

gongph commented Sep 20, 2019

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

@albertodeago
Copy link

I think this is already fixed with #9917
In fact I just tested this with a built version 2.6.11 and I see no warning

@sirlancelot
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants
@sirlancelot @posva @albertodeago @gongph and others