2017-09-28 2 views
2

난 당신 같은 문자열 jsonified 목록입니다 그러나 그 문자열 중 일부는 자신의 소품이 중 하나를 통해 VUE 구성 요소에 작은 따옴표 '소품의 작은 따옴표를 어떻게 피할 수 있습니까?

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

그럼 내가 삽입을 할 수도 있습니다 장고 컨텍스트 변수가 단일 작은 따옴표로 묶어야합니다.

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

그러나 충돌은 단지 첫 번째 작은 따옴표까지 목록을 삽입 한 다음 브라우저에서 텍스트로 다른 모든 것들을 기록합니다.

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

+0

나는 vue.js에 대해 아무것도 몰라하지만 당신은 단지 작은 따옴표로 작업 할 수 있습니다 확신? –

+0

큰 따옴표를 사용하면 반대쪽 문제가 생깁니다. 첫 번째 항목까지 모든 것을 읽습니다. 그러면 목록의 나머지 부분이 텍스트로 렌더링됩니다. – lapinkoira

+1

'vue'가 읽을 때'strings' 변수가 어떻게 끝날 것으로 예상합니까? –

답변

3

잘 작동합니다. 배열을 변수로 사용하는 경우 변수 이름은 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>

관련 문제