У меня есть автономное приложение vue. js, оно преобразовано из angular 1 + bootstrap в vue + bootstrap. В angular я использовал sanitizer для рендеринга ajax html данных внутри компонента, в vue какая простая альтернатива этому?
HTML>
<div class="detailsText" v-if="object.definition != ''" data-html="true" data-toggle="tooltip" data-placement="bottom" v-bind:title="strip(object.definition)" v-html="object.definition"></div>
Javascript>
var vueobject = new Vue({
el: '#compactViewController',
data: {
OBJECTS: [],
CURRENT_PAGE: 1,
PERMISSION_KEYS: parent.OPTION_PERMISSIONS,
filterText: "",
pageSize: pageSize
}
...
HTML Теги <div>
, <b>
не отображаются
new Vue({
el: "#app",
data: {
channel: "<b>hello world!</b>"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<div id="app">
<div class="channels">
TEST: <span v-html="channel"></span>
</div>
</div>
Он отлично работает, когда мы используем v- html с локальным значением html, то же самое не будет работать с необработанным html, исходящим из вызова API.