{{libText}} // what I wrote in js Vue.component(... , {" />

преобразовать строку в Dom в vuejs

html string dom vue.js

10743 просмотра

3 ответа

160 Репутация автора

недавно я хочу преобразовать stirng в Dom в компоненте vue, но это не работает, как я ожидал. Мой код выглядит так:

  // what I wrote in the template
  <div id="log">
      {{libText}}
  </div>

  // what I wrote in js
        Vue.component(...  , {
        template: ...  ,
        data: function () {
               return ...     
            }
        },
        computed: {           
            libText:function(){
                var str="<p>some html</p>";
                var div = document.createElement('div');
                div.innerHTML = str;
                return div;
            }
        },
        methods:{...}
        })

В результате я получаю строку «[object HTMLDivElement]», а не Dom. Было бы здорово, если кто-нибудь может помочь мне решить эту проблему

Автор: Lin Shen Источник Размещён: 18.07.2016 03:35

Ответы (3)


-2 плюса

4924 Репутация автора

То, что вы пытаетесь сделать, не имеет никакого смысла. Это не так, как усы работают. Они просто выводят строки. Не удивительно, что ваш вывод - это строка.

Если вы хотите создать новый компонент, вам понадобится конструктор И элемент DOM, согласно следующему уравнению.

DOM el + VueComponent constructor = Vue Component

Вы должны составить конструктор в некоторый хук ( Vue.extend), например, созданный хук. Затем создайте элемент точно так же, как вы. Затем сделайте что-то вроде:

var myComponent = new myConstructor({el: myElement})

И вуаля!

Автор: gurghet Размещён: 18.07.2016 07:48

4 плюса

1287 Репутация автора

Решение

Возможное решение:

Шаблон:

<div id="log">
    {{{libText}}}
</div>

Обратите внимание на тройку {} для получения необработанной интерпретации html / text.

Javascript:

Vue.component(...  , {
    template: ...  ,
    data: function () {
           return ...     
        }
    },
    computed: {           
        libText:function(){
            // return directly html
            var str="<div><p>some html</p></div>";
            return str;
        }
    },
    methods:{...}
});
Автор: g.annunziata Размещён: 18.07.2016 08:10

17 плюса

506 Репутация автора

Если вы используете Vue 2, используйте v-htmlдирективу:

<div v-html="yourVariable"></div>

https://vuejs.org/v2/api/#v-html

Автор: Collier Devlin Размещён: 13.10.2017 02:09
Вопросы из категории :
32x32