трафарет js, передать массив в качестве значения атрибута в пользовательском элементе

Question

Я ищу способ передать массив как значение атрибута веб-компонента, созданного с помощью трафарета js. Это возможно?

Я пытаюсь сделать что-то похожее на это!

index. html

<mv-select options=['one','two','three']></mv-select>

mv-select. tsx

@Component({
  tag: 'mv-select',
  styleUrl: 'mv-select.scss',
  assetsDirs: ['assets'],
    shadow: true
})
export class MvSelect {
  @Element() private element: HTMLElement;
  @Prop() options: string[];

Answer 1

Проблема в том, что HTML атрибуты могут быть только строками, а не массивами или объектами. Есть пара способов передать массив:

1. Передать его как свойство:

document.querySelector('mv-select').options = ['one', 'two', 'three'];

Передайте его как строковый атрибут JSON:

<mv-select options='["one", "two", "three"]'></mv-select>

Чтобы преобразовать это JSON в массив, вы можете использовать метод @Watch для обновления внутреннего @State свойство:

export class MvSelect {
  @Prop() options: string;
  @State() internalOptions: string[];

  componentWillLoad() {
    this.parseOptions();
  }

  @Watch('options')
  parseOptions() {
    if (this.options) {
      this.innerOptions = JSON.parse(this.options);
    }
  }
}

Этот код гарантирует, что при каждом изменении options оно будет JSON проанализировано, и вы можете использовать innerOptions в качестве массива.

Обратите внимание, что вы будете приходится вручную this.parseOptions() в componentWillLoad, потому что наблюдатели не вызываются при инициализации.

Answer 2

написано за прокси. Таким образом, вы можете напрямую присвоить значение в объекте.

// Пример:

var cmp = document.querySelector('my-comp');
cmp.data = arr; // arr is the array you are want to pass

// Другой способ: передать как строку данных и проанализировать

export class TodoList {
  @Prop() name: string = 'Stencil';

  @Watch('name')
  validateName(newValue: string, oldValue: string) {
    const isBlank = typeof newValue == null;
    const has2chars = typeof newValue === 'string' && newValue.length >= 2;
    if (isBlank) { throw new Error('name: required') };
    if (!has2chars) { throw new Error('name: has2chars') };
  }
}

Ссылка:

1. https://stenciljs.com/docs/properties#prop -декоратор

2. https://medium.com/@gilfink / использование сложных объектов-массивов-как-реквизитов-в-трафарете-компонентов-f2d54b093e85