Динамические значения Vue.js в компоненте
Я создаю развязанное приложение с Vue.js, использующее данные из Rest API WordPress. Приложение включает функцию сортировки по категориям. Я не могу использовать ванильные формы ввода для достижения этой цели и при этом соответствовать дизайну, поэтому мне нужно использовать компонент Vue для перечисления категорий. У меня проблема в том, что я не могу указать имя категории в шаблоне компонента.
Код компонента:
Vue.component( 'sort-button', {
props: ['value'],
template: `
<button class = "button button-accent"
v-bind:value = "value"
v-on:input = "$emit( 'input', $event.target.value )"
>
<a href = "#">{{ cat.name }}</a>
`
}
);
Я показываю это как шаблон в DOM, например:
<sort-button v-for = "cat in portfolioCats"></sort-button>
Это проходит по каждой категории и дает мне соответствующую кнопку, если я оставляю содержимое тега a в шаблоне статическим или пустым. Однако, если я использую усы {{cat.name}}, это приведет к ошибке, потому что cat не определен.
Мой вопрос: как я могу сделать так, чтобы шаблон знал о cat в контексте цикла for? Обратите внимание, что я хотел бы, чтобы это был повторно используемый компонент, который я мог бы подключить к другим экземплярам Vue на сайте.
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вам нужно передать переменную cat как опору.
<sort-button v-for = "cat in portfolioCats" :cat = "cat"></sort-button>
И добавьте его в массив props.
props: ['value', 'cat']
Прекрасно работает. Спасибо за ответ!
cat не определен в компоненте. Для этого вам понадобится опора, а также необходимо указать значение для value.
<sort-button v-for = "cat in portfolioCats" :name = "cat.name" :value = "cat.value"></sort-button>
Итак, ваш шаблон должен быть
Vue.component( 'sort-button', {
props: ['value', 'name'],
template: `
<button class = "button button-accent"
v-bind:value = "value"
v-on:input = "$emit( 'input', $event.target.value )"
>
<a href = "#">{{ name }}</a>
`
});
Также, кнопки обычно не имеют событий input, поэтому неясно, что вы ожидаете от них. Возможно, вам нужно событие click.
Только что заметил, что вы тоже не закрываете свой тег <button>. Странно помещать якорь внутри кнопки; возможно, вы хотите, чтобы кнопка закрывалась перед привязкой.
элементы кнопки могут содержать теги в качестве фразового содержимого: developer.mozilla.org/en-US/docs/Web/Guide/HTML/…
Один из вариантов - использовать слот, чтобы вы могли определять контент из родительского контекста. Например
<button class = "button button-accent"
:value = "value"
@input = "$emit( 'input', $event.target.value )">
<slot></slot>
</button>
а в родительском ...
<sort-button v-for = "cat in portfolioCats" v-model = "something" :key = "cat.id">
<a href = "#">{{ cat.name }}</a>
</sort-button>
+1. Другим подходом также может быть слоты, если вы хотите управлять данными у родителя, а не передавать их вниз.