소품에 대해 단일 인용구를 사용하지 않는 방법

소품에 대해 단일 인용구를 사용하지 않는 방법

문자열의 jsonified 목록인 Django 컨텍스트 변수가 있지만 일부 문자열에는 따옴표가 하나 있을 수 있습니다.'

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

그러나 첫 번째 작은 따옴표까지 목록을 삽입한 후 브라우저에 모든 내용을 텍스트로 기록합니다.

어떻게 하면 탈출할 수 있을까?

이거 잘 돼.어레이를 변수로 사용하고 있는 경우는, 심플하게v-bind변수 이름배열을 컴포넌트 인스턴스화에 삽입하는 경우 작은 따옴표를 백슬래시-단일 따옴표로 대체해야 합니다.

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의 답변은 맞지만, 다른 사람에게 명확하지 않은 경우 json을 javascript 변수에 할당하고 다음으로 전달해야 합니다.v-bind.

예

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

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

언급URL : https://stackoverflow.com/questions/46471177/how-to-escape-single-quote-for-a-prop