Habillage dynamique des sous-chaînes correspondantes dans les composants Vue

Question

J'ai une liste de mots, tels que :

["Foo","Bar"]

Lorsqu'on me présente une chaîne de caractères, j'aimerais remplacer dynamiquement les mots trouvés dans la liste par des composants. Étant donné une chaîne comme celle-ci :

"Foo lorem ipsum dolor Bar."

Le résultat serait :

<MyComponent :text="Foo"/> lorem ipsum dolor <MyComponent :text="Bar"/>.

Quelle est la meilleure façon d'y parvenir ?

Answer 1

Voici mon approche :

Vue.component('my-component', {
  props: ['word'],
  template: '<span class="my-component">{{word}}</span>'
})
new Vue({
  el: '#app',
  data() {
    return {
      text: 'Foo is the new Bar.',
      filters: new Set(['Foo', 'Bar'])
    }
  },
  computed: {
    tokens() {
      return this.text.match(/(?:\b|^).+?(?:\b|$)/g)
    }
  }
})

.my-component {
  color: #0095ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template v-for="token in tokens">
    <my-component v-if="filters.has(token)" :word="token"></my-component>
    <template v-else>{{ token }}</template>
   </template>
</div>

L'idée est assez simple :

1. diviser la chaîne désirée en jetons
2. pour chaque token, vérifier s'il est dans la liste des mots :
   • si oui, rendez-le avec votre composant
   • sinon, rendez-le par défaut

Cela fera littéralement ce que vous voulez :)

REMARQUE : l'utilisation de template permet d'avoir une sortie HTML propre, sans inutiles div o span éléments.

Answer 2

Je pense v-for est la seule chose nécessaire pour cela.

Vue.component('mycomponent', {
  props: ['word'],
  template: '<div> Word is {{word}} </div>'
})

var vm = new Vue({
  el: '#app',
  data: function(){
    return{
        text: 'Foo lorem ipsum dolor Bar',
      selectedWords: ['Foo', 'Bar']
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>

<div id="app" >
  <div v-for="item in text.split(' ')">
    <div v-if="selectedWords.includes(item)">
      <mycomponent
            :key="item"
            :word="item">
      </mycomponent>
    </div>
    <div v-else>
      {{item}}
    </div>
  </div>
</div>

jsfiddle

Explication

J'ai passé word en tant que prop a mycomponent . Puis on a utilisé le raccourci pour v-bind: qui est : de lier item a word

Avis de non-responsabilité : J'apprends aussi Vue XD