Vue-next: can`t get this in props default function

Created on 18 Aug 2020  路  6Comments  路  Source: vuejs/vue-next

Version

3.0.0-rc.5

Reproduction link

https://jsfiddle.net/xxholly32/w7k8vzng/19/

Steps to reproduce

https://jsfiddle.net/xxholly32/w7k8vzng/19/

i have two related props theme and contentHtml, but i cant get information from default function.

What is expected?

like vue2 , i can get theme value in default function

What is actually happening?

console will be 'undefined'


i think props default function should have attr like setup , or this should be work again

Most helpful comment

With the commit above you should be able to do

contentHtml: {
      type: String,
      default (props) {
        console.log(props.theme)
      },
    }

I think it's best to prohibit this usage inside prop default functions and validators. This is technically a breaking change and we will need an RFC/migration guide item for it.

All 6 comments

With the commit above you should be able to do

contentHtml: {
      type: String,
      default (props) {
        console.log(props.theme)
      },
    }

I think it's best to prohibit this usage inside prop default functions and validators. This is technically a breaking change and we will need an RFC/migration guide item for it.

nice

I see this problem still cant work in your way the current version 3.0.0-rc.5

https://jsfiddle.net/xxholly32/w7k8vzng/21/

@yyx990803 In Vue 2, accessing this allowed access to injections, properties from Vue.prototype and the store. Any one of these could have been used to provide a default based on configuration/locale/theme.

In particular, the documentation includes the following example for provide/inject:

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

I don't know how often this was used. Here's an example I found in the Vuetify codebase that passes global configuration to a default function:

https://github.com/vuetifyjs/vuetify/blob/5533b030a3f892abed057dbb00946d57352e6751/packages/vuetify/src/mixins/mobile/index.ts#L16

nice

I see this problem still cant work in your way the current version 3.0.0-rc.5

jsfiddle.net/xxholly32/w7k8vzng/21

rc.7 is OK.

Use inject to set props default value was possibile. did you have any solution now ? @skirtles-code

@xxholly32 Not directly. You could use a computed property to apply a default instead.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

raphael10-collab picture raphael10-collab  路  3Comments

cexbrayat picture cexbrayat  路  4Comments

crutchcorn picture crutchcorn  路  3Comments

HakamFostok picture HakamFostok  路  3Comments

Jexordexan picture Jexordexan  路  4Comments