VueJ는 div 래퍼 없이 계산된 값을 원시 HTML로 취급합니다.

VueJ는 div 래퍼 없이 계산된 값을 원시 HTML로 취급합니다.

Vue2에서는 값을 HTML로 취급할 수 있습니다.

<div v-html="computedValue"/>

단, 필요 여부에 관계없이 모든 요소 주위에 <div> 태그를 추가합니다.html 이외의 텍스트일 경우 추가 div 태그 없이 선택적으로 raw HTML로 처리하고 싶습니다.

지금 당장 실행할 수 있는 유일한 방법은 2개의 계산된 속성을 추가하고 값을 여러 번 계산하는 것입니다.

<div v-if="containsHtml" v-html="computedValue"/>{{nonHtmlValue}}

컴포넌트

Vue.component("datatable-cell", {
    template: `
        <td>{{computedValue}}</td>
        <!-- above is ideal  I'm trying to avoid 
        <td><div v-if="containsHtml" v-html="computedValue"/>{{nonHtmlValue}}</td>
         -->
    `,
    props: ["row","column"],
    computed: {
        containsHtml: function(){
            return this.computedValue != null && this.computedValue.charAt[0] == "<";
        },
        nonHtmlValue: function(){
           if(this.containsHtml) return "";
           return this.computedValue;
        },
        computedValue: function(){
            if(this.column.template){
                var templateValue = this.column.template(this.row);
                if(isSafeMarkup(templateValue)){
                    //Treat as HTML - how????
                    return templateValue;
                }else{
                    //Escape and treat as text.  This already works
                    return templateValue;
                }
            }else{
                return this.row[column.name];
            }
        }
})

언급URL : https://stackoverflow.com/questions/46475639/vuejs-treat-computed-value-as-raw-html-without-requiring-div-wrapper