Question

我有一个Django上下文变量，它是一个jsonified字符串列表，但其中一些字符串可能只有一个引号'

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

然后我通过他的一个道具将它插入一个vue组件中，如你所见，必须用单引号包装。

:strings='{{ strings|safe }}'

但它崩溃了，只需将列表插入第一个单引号，然后将其他所有内容作为文本写入浏览器。

我怎么逃避它？

Answer 1

这很好用。如果数组被用作变量，只需v-bind变量名称。如果将数组注入组件实例化，则需要用反斜杠单引号替换单引号。

＆＃13;

new Vue({
  el: '#app',
  data: {
    list_of_strings: ["test", "hello", "I have a'single quote"]
  },
  components: {
    showString: {
      props: ['strings']
    }
  }
});

＆＃13;

<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>

＆＃13;

Answer 2

Roy J的答案是正确的，但是如果对其他人来说不是很明显，则需要将json分配给javascript变量，然后将其传递给v-bind。

例如

<script>
var list_of_strings = {{ list_of_strings|safe }};
</script>

<my-component v-bind:strings="list_of_strings"></my-component>

如何逃避道具的单引号？

2 个答案: