Заменить элемент DOM в Vue после разделения

Question

Это мой массив в vue:

 data: {
        my_list: [
            { "text": "Whoever is Silent. He is Saved", "emphasizes": "Silent, Saved", "link": "website" },
            { "text": "If you don't value yourself, who will", "emphasizes": "value, self", "link": "twitter" },
        ],
    }

, а это мой html

<li v-for="texts in my_list">
      {{ texts.text}} ({{ texts.emphasizes }}) {{ texts.link }}
</li>

Я хочу отменить текст {{ texts.text }}, который соответствует {{ texts.emphasizes }} при разделении вместе с некоторыми HTML

Answer 1

Вам нужно v-html для отображения и использовать methods для замены.

var app = new Vue({
  el:'#app',
   data: {
        my_list: [
            { "text": "Whoever is Silent. He is Saved", "emphasizes": "Silent, Saved", "link": "website" },
            { "text": "If you don't value yourself, who will", "emphasizes": "value, self", "link": "twitter" },
        ],
    },
    methods:{
      replaceText: function(str,replaceText){
        var replaceArr = replaceText.split(',');
        for(let i in replaceArr){
          str = str.split(replaceArr[i].trim()).join('<strong>'+replaceArr[i].trim()+'</strong>');
        }
        return str;
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<ul>
<li v-for="texts in my_list">
      <span v-html="replaceText(texts.text,texts.emphasizes)"></span> ({{ texts.emphasizes }}) {{ texts.link }}
</li>
</ul>
</div>