Как заменить строку на компонент (vue)
У меня есть строки, содержащие ###, и я заменяю их значениями массива. Теперь я хочу использовать их с компонентом, я создал компонент, и он работает, но я не знаю, как использовать его в строках. Я не хочу оборачивать их вручную, потому что не знаю, какие будут струны, там может быть несколько ###. Если у него 2 ###, опции будут иметь 2 подмассива.
Как лучше это сделать?
Код: https://jsfiddle.net/tsobh4nu/
Vue.component('opt', {
template: `<label>
<span class = "bold" v-for = "(str,idx) in options">
{{str + " / "}}
</span>
</label>`,
props:{options: Array}
})
new Vue({
el: '#app',
data: {
str: "I have ### and you have a ###.",
options: [
['AAA', 'BBB', 'CCC'],
['XXX', 'YYY', 'ZZZ']
]
},
computed:{
replacedStr(){
let newStr = this.str;
this.options.forEach(option=>{
newStr = newStr.replace('###',this.concatenateOptions(option));
})
return newStr;
}
},
methods: {
concatenateOptions(strArr) {
let separator = "";
let strOptions = "";
strArr.forEach(word => {
strOptions += separator + word;
separator = " / ";
});
return strOptions;
}
}
}).bold {
font-weight: bold
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id = "app">
<p>I want something like this, but using components: </p>
{{replacedStr}}
<br>
<hr>
My Components:<br>
<opt :options = "options[0]"></opt>
<br>
<opt :options = "options[1]"></opt>
</div>Большое спасибо.
нет, это то место, где я собираюсь заменить компонент. Я видел этот пример и думаю, что это другое. Они знают, куда поставить <component v-bind:is = "currentTabComponent"></component>. В моем случае не знаю, он более динамичный.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это более общий характер, но я надеюсь, что это кому-то поможет. Добавьте в свой шаблон динамический компонент: <component v-bind:is = "processedHtml"></component>.
Затем добавьте вычисляемый метод:
computed: {
processedHtml () {
let html = this.html.replace('[Placeholder]', '<my-component></my-component>');
return {
template: '<div>' + html + '</div>'
}
}
}
Где <my-component> - это ваш пользовательский компонент, а this.html - это ваш HTML-контент, содержащий заполнитель [Placeholder].
Важно вернуть элемент с одним корневым узлом. Поэтому возврат упакован в <div>.
Прочтите более подробное руководство по этой проблеме здесь в моем блоге. Например, чтобы передать реквизиты в <my-component>
Мне не удалось использовать произвольный html в v-bind: is. В документации сказано, что вы можете использовать только имя компонента или объект опции компонентов. vuejs.org/v2/guide/components.html#Dynamic-Components Какую версию vue вы используете?
У меня была такая же проблема. У меня был элемент, который должен был отображать текущее количество элементов. Текущий счет пришел из магазина и постоянно менялся. Я использовал v-text. Я знаю, что это довольно специфическая ситуация, но, надеюсь, это поможет кому-то в будущем.
<P id = "results_count" v-text = "current_count"></P>
а в части данных компонента у меня было свойство с именем current_count, которое обновлялось с помощью методов.
###- это имя компонента? Если это так, вы можете использовать динамические компоненты.