Question

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

<div class="container">
  <ul class="flex-container wrap">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
    <li class="flex-item">8</li>
  </ul>
</div>

我该怎么做？有可能吗？

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

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

Answer 1

我认为没有一种方法可以像您想要的那样简洁。

您可能要做的最好的事情是

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

Answer 2

检查是否可行，我现在不在计算机后面。

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

Answer 3

要对非简单变量的目标使用解构，不能使用速记语法，而需要显式指定解构的属性名称。就您而言：

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

但是，如果query对象仅包含这两个属性，则Object.assign是一个更简单的解决方案：

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

Vue-对此对象进行销毁（数据）

3 个答案: