Как заменить строку компонентом (vue)

Question

У меня есть строки, содержащие ###, и я заменяю их значениями массива. Теперь я хочу использовать их с компонентом, я создал компонент, и он работает, но я не знаю, как использовать его в строках. Я не хочу оборачивать их вручную, потому что я не знаю, какими будут строки, у них может быть несколько ###. Если он имеет 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>

Большое спасибо.

Answer 1

Это более общий вопрос, но я надеюсь, что он кому-нибудь поможет. Добавьте динамический компонент в свой шаблон: <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>

Answer 2

Вам нужно продвинуться по пищевой цепочке! Вы идете на многое, чтобы обойти благость Vue. Ваш data.string является шаблоном, а ваш ### не очень значимым заполнителем, и тогда вы должны выполнить работу самостоятельно.

Разве вы не можете использовать систему шаблонов Vue? И ваш метод concatenateOptions можно заменить на Array.join ().