Javascript Vue-将对象分解为此(数据)

Javascript Vue-将对象分解为此(数据),javascript,vue.js,ecmascript-6,destructuring,Javascript,Vue.js,Ecmascript 6,Destructuring,如何对Vue组件数据使用对象分解? 这是我的实际代码: data: () => ({ descricao: '', perfilBase: null, anotherField: '', otherOne: false }), mounted () { this.descricao = this.$route.query.descricao this.perfilBase = this.$route.query.perfilBase } 我怎么能这样做?可能吗

如何对Vue组件数据使用对象分解? 这是我的实际代码:

data: () => ({
  descricao: '',
  perfilBase: null,
  anotherField: '',
  otherOne: false
}),

mounted () {
  this.descricao = this.$route.query.descricao
  this.perfilBase = this.$route.query.perfilBase
}
我怎么能这样做?可能吗

mounted () {
  { this.descricao, this.perfilBase } = ...this.$route.query
}

我认为没有一种方法能像你想的那样简洁

你能做的最好的事情就是

mounted () {
   const { descricao, perfilBase } = this.$route.query
   this.descricao = descricao
   this.perfilBase = perfilBase
}

我认为没有一种方法能像你想的那样简洁

你能做的最好的事情就是

mounted () {
   const { descricao, perfilBase } = this.$route.query
   this.descricao = descricao
   this.perfilBase = perfilBase
}

检查这是否有效,我现在不在电脑后面

{ a, b } = this.$route;
[ this.a, this.b ] = [a, b];

检查这是否有效,我现在不在电脑后面

{ a, b } = this.$route;
[ this.a, this.b ] = [a, b];

要对简单变量以外的目标使用解构,不能使用速记语法,但需要显式指定解构属性名称。就你而言:

mounted () {
  ({ descricao: this.descricao, perfilBase: this.perfilBase } = this.$route.query);
}
但是,如果
查询
对象仅包含这两个属性,
对象.assign
是一个简单得多的解决方案:

mounted () {
  Object.assign(this, this.$route.query);
}

要对简单变量以外的目标使用解构,不能使用速记语法,但需要显式指定解构属性名称。就你而言:

mounted () {
  ({ descricao: this.descricao, perfilBase: this.perfilBase } = this.$route.query);
}
但是,如果
查询
对象仅包含这两个属性,
对象.assign
是一个简单得多的解决方案:

mounted () {
  Object.assign(this, this.$route.query);
}

尝试删除此前面的“…”。$route.queryTry要删除此前面的“…”。$route.query这确实有效,我已验证过。我必须声明,要在chrome上实现此功能<代码>常数{a,b}=这个。$route是的,您是对的@JamieMarshalllit的两行而不是一行,但是数组语法阻止您为提取的每个属性编写赋值。@GiorgioTempesta从技术上讲,第一行可以与第二行组合,如下所示
[this.a,this.b]=[this.$route.a,this.$route.b]
但我更喜欢2行版本。这确实有效,我已经验证过了。我必须声明,要在chrome上实现这一点<代码>常数{a,b}=这个。$route是的,您是对的@JamieMarshalllit的两行而不是一行,但是数组语法阻止您为提取的每个属性编写赋值。@GiorgioTempesta从技术上讲,第一行可以与第二行组合,如下所示
[this.a,this.b]=[this.$route.a,this.$route.b]
但我更喜欢两行的版本,我认为第一个示例在从一种案例样式更改为另一种案例样式时非常有用,例如:
({order\u number:this.orderNumber,order\u amount:this.orderAmount}=this.config)
我认为第一个示例在从一种案例样式更改为另一种案例样式时非常有用,例如:
({order\u number:this.orderNumber,order\u amount:this.orderAmount}=this.config)