How to escape single quote for a prop? How to escape single quote for a prop? vue.js vue.js

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>