Is it possible to condition a default value in the constructor depending on another value?

Question

I want to set a defalt value in the constructor depends on other value.

Here is the template where the type values are:

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

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

This is more or less what I want:

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;
            }
        }
    }
}

You can use ternary `this.numPassengers = this.type === '1' ? 1 : 0;` — Cid, Feb 17 '20 at 12:31
`this.type === '1'` always evaluates to false: you're comparing an array with a string. Maybe you meant `this.type.includes('1')`? — Umbo, Feb 17 '20 at 20:31

score 0 · Answer 1 · answered Feb 21 '20 at 05:07

Not from the constructor, no. When the constructor is called, the properties haven't been set from the DOM yet. I recommend checking inside firstUpdated.

However, a couple other things to consider.

First, the expression for evaluating this.numPassengers is a bit off. I can't quite see from the two examples what you want, but if type was meant to be an array, consider the following snippet:

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

But I think you should specifically ask yourself "what is type?" and "what is numPassengers?" as it's not clear in your examples what you were intending.

To help you on the path to victory, I'll include a snippet below with a debugger in it. I recommend you run the code via polymer serve or es-dev-server or another development server, open the code with Inspect opened in your browser and walk through the debugger breakpoint to see if you can resolve the issue:

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;
    }
}

score 0 · Answer 2 · answered Feb 21 '20 at 05:34

You can achieve what you want if you pass type as an argument to the constructor. You can evaluate type and conditionally set the value this.numPassengers based on it's value - you can achieve this using the 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);

Is it possible to condition a default value in the constructor depending on another value?

2 Answers2