Question

我想在构造函数中设置一个默认值取决于其他值。

这是类型值所在的模板：

class SelectOption extends LitElement {
static get properties() {
    return {
        type: {type: Array}
    };
}

constructor() {
    super();
    this.type = ['1', '2'];
}

这或多或少是我想要的：

import { LitElement, html } from 'lit-element';

class SelectCounter extends LitElement {
    static get properties() {
        return {
             type: {type: Array},
             numPassengers: {type: Number},
         };
     }

    constructor() {
        super();
        this.numPassengers = {
            if (this.type === '1') {
                this.numPassengers = 1;
            } else {
                this.numPassengers = 0;
            }
        }
    }
}

Answer 1

不是来自构造函数，不是。调用构造函数时，尚未从DOM设置属性。我建议检查firstUpdated内部。

但是，还有两点要考虑。

首先，用于评估this.numPassengers的表达式有些偏离。从两个示例中我不太清楚您想要什么，但是如果type是一个数组，请考虑以下代码段：

const thisType = ['1', '2'];
let thisNumPassengers;
if (thisType[0] === '1') {
    thisNumPassengers = 1;
} else {
    thisNumPassengers = 0;
}
console.log(thisNumPassengers);

但是我认为您应该特别问自己“ type是什么？”和“ numPassengers是什么？”因为您的示例中尚不清楚您打算做什么。

为帮助您迈向胜利之路，我将在下面添加一个包含debugger的代码段。我建议您通过polymer serve或es-dev-server或其他开发服务器运行代码，在浏览器中打开检查打开代码，然后遍历调试器断点以查看是否可以解决问题：

import { LitElement, html } from 'lit-element';

class SelectCounter extends LitElement {
    static get properties() {
        return {
             type: {type: Array},
             numPassengers: {type: Number},
         };
     }

    firstUpdated() {
        console.log(this.type);
        this.numPassengers = 'fix me';
        debugger;
    }
}

Answer 2

如果将type作为参数传递给构造函数，则可以实现所需的功能。您可以评估type并根据其值有条件地设置值this.numPassengers-您可以使用ternary operator来实现：

class SelectCounter {
  constructor(type) {
    this.numPassengers = type === '1' ? 1 : 0
  }
}

const sc0 = new SelectCounter();
const sc1 = new SelectCounter('1');

console.log(sc0.numPassengers);
console.log(sc1.numPassengers);

是否可以根据另一个值在构造函数中设置默认值？

2 个答案: