How to escape single quote for a prop?
This works fine. If the array is being used as a variable, simply v-bind
the variable name. if the array is being injected into the component instantiation, you would need to replace single quotes with backslash-single quotes.
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>
Roy J's answer is correct, but in case it is not obvious to others you need to assign the json to a javascript variable and then pass it to v-bind
.
eg
<script>var list_of_strings = {{ list_of_strings|safe }};</script><my-component v-bind:strings="list_of_strings"></my-component>