title: How to replace a string with a component (vue)
body: <p>I have strings that contains <code>###</code> and I am replacing with array values. Now I want to use them with a component, I created the component and it works but I don't know how to use it in the strings. I don't want to wrap them manually because I don't know how the strings will be, it can have several <code>###</code>. If it has 2 <code>###</code>, options will have 2 subArrays.</p>
  
  <p>What is the better way to do it?</p>
  
  <p>Code: <a href="https://jsfiddle.net/tsobh4nu/" rel="noreferrer">https://jsfiddle.net/tsobh4nu/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('opt', {
    template: `&lt;label&gt;
                  &lt;span class="bold" v-for="(str,idx) in options"&gt;
                       {{str + " / "}}
                  &lt;/span&gt;
               &lt;/label&gt;`,
    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=&gt;{
         newStr = newStr.replace('###',this.concatenateOptions(option));
        })
        return newStr;
      }
    },
    methods: {
      concatenateOptions(strArr) {
        let separator = "";
        let strOptions = "";
        strArr.forEach(word =&gt; {
          strOptions += separator  + word;
          separator = " / ";
        });
        return strOptions;
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bold {
    font-weight: bold
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;p&gt;I want something like this, but using components: &lt;/p&gt;
    {{replacedStr}}
    &lt;br&gt;
    &lt;hr&gt;
    My Components:&lt;br&gt;
    &lt;opt :options="options[0]"&gt;&lt;/opt&gt;
    &lt;br&gt;
    &lt;opt :options="options[1]"&gt;&lt;/opt&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Many thanks.</p>