2017-09-28 6 views
2

J'ai une variable de contexte Django qui est une liste jsonified de chaînes, mais certaines de ces chaînes peut avoir une seule citation 'Comment échapper à un devis pour un accessoire?

import json 
list_of_strings = ["test", "hello", "I have a'single quote"] 
return render(request, 'template.html', { 
    'strings': json.dumps(list_of_strings) 
}) 

Puis-je insérer dans un composant vue à travers l'un de ses accessoires qui, comme vous peut voir, doit être emballé entre guillemets simples.

:strings='{{ strings|safe }}

Mais il tombe en panne, il suffit d'insérer la liste jusqu'à ce que la première citation unique et écrit ensuite tout le reste sous forme de texte dans le navigateur.

Comment puis-je y échapper?

+0

Je ne sais pas quoi que ce soit au sujet vue.js mais êtes-vous sûr qu'il ne peut fonctionner avec des guillemets simples? –

+0

Avec des guillemets j'ai le problème opposé, le prop lit tout jusqu'à la première "puis restitue comme texte le reste de la liste – lapinkoira

+1

Et comment voulez-vous que la variable' strings' soit à la fin quand 'vue' le lit? –

Répondre

3

Cela fonctionne très bien. Si le tableau est utilisé en tant que variable, il suffit de v-bind le nom de la variable. Si le tableau est injecté dans l'instanciation du composant, vous devrez remplacer les guillemets simples par des guillemets simples.

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    list_of_strings: ["test", "hello", "I have a'single quote"] 
 
    }, 
 
    components: { 
 
    showString: { 
 
     props: ['strings'] 
 
    } 
 
    } 
 
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <show-string :strings="list_of_strings" inline-template> 
 
    <div> 
 
     <div v-for="s in strings">{{s}}</div> 
 
     <div v-for="s in ['some', 'array', 'single\'quote']">{{s}}</div> 
 
    </div> 
 
    </show-string> 
 
</div>