Vue.js: установить свойство оцениваемого / привязанного к v в скрипте
Я создаю экземпляр компонента vue.js в JavaScript, и я не могу понять, как дать ему оцениваемое свойство, которое в шаблоне будет добавлено с помощью v-bind.
Предположим, foo = "a" и bar = "b".
Вот пример того, как я могу добиться этого в шаблоне:
<div :class = "foo + ' ' + bar"></div>
Результирующий div:
<div class = "a b"></div>
Однако при создании этого элемента с использованием JavaScript установка для свойства class значения «foo + bar» приводит к тому, что именно эта строка устанавливается как класс.
new div("name", { class: "foo + bar" })
Результирующий div:
<div class = "foo + bar"></div>
Обратите внимание, что это надуманный пример - я не пытаюсь объединить строки, а вместо этого пытаюсь передать оцениваемое свойство пользовательскому компоненту vue.js в JavaScript.
Как передать оцениваемое свойство компоненту vue.js, созданному с помощью JavaScript?
Спасибо за вашу помощь.
@keja Я разъяснил свой первоначальный вопрос на основе вашего комментария.
вы могли бы сделать что-то вроде; new div("name", { class: foo + " " + bar }) как в первом примере
@keja спасибо - сначала это было бы правильно, но результат не был бы реактивным; любое будущее изменение foo или bar не приведет к обновлению значения свойства. В этом суть синтаксиса v-bind.
ах, я вижу, вы хотите, чтобы <div class = "foo + bar"></div> был оценен vue ..
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
не уверен, понимаю ли я, что вы здесь пытаетесь сделать, но пробовали ли вы редактировать
<div :class = "[foo, bar]"></div>: ах, вы хотите объединить строку ... может быть, что-то вроде;<div :class = "$ {foo} $ {bar}"></div>(да, обратные кавычки запутались в комментариях)