Проблема в том, что HTML атрибуты могут быть только строками, а не массивами или объектами. Есть пара способов передать массив:
- Передать его как свойство:
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
, потому что наблюдатели не вызываются при инициализации.