VueJS / v- html показывает пустую страницу (Bokeh- html) - PullRequest
Новая
       7

VueJS / v- html показывает пустую страницу (Bokeh- html)

0 голосов
/ 15 января 2020

Я новичок в VueJS и пытаюсь отобразить локальный html -файл внутри приложения Vue.

Я получаю файл html с топором ios как следующее: 

<template>
  <div>

    <h1>bla</h1>

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

  </div>
</template>


<script> 
import axios from 'axios'

export default { 

  data() { 
    return { 
      input: null,
      }
 }, 

 created() {
 this.loadFile()
 },

 methods: {
        loadFile() {
          axios({
            method: "get",
            url: "../../test.html"
          })
            .then(result => {
              this.input = result.data;
              console.log("Data: " + result.data)
            })
            .catch(error => {
              console.error("error getting file: " + error);
            });
        },
      }
}

</script>

Мы генерируем html -файлы с Bokeh (интерактивные диаграммы). Если я открою html файлы в браузере, они будут показаны правильно. Эти файлы содержат <script type="text/javascript"> и <script type="application/json">.

Я попробовал это с простым "Hello World" - html Примером, и это прекрасно работает и отображается в Vue. Но когда я читаю фактический файл, я просто получаю пустую страницу. console.log(result.data) показывает мне правильный и полный код html, но я не получаю никаких ошибок, поэтому не могу понять проблему.

Кто-нибудь знает, что я должен настроить, чтобы это работало?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 15 января 2020

Вы делаете это внутри файла .vue или все это в файле .html. Если в html вам нужно не забыть установить свойство el в вашей модели Vue, чтобы оно знало, где визуализировать. Если это .vue, то по той же причине должен быть определен template.

Вот скрипка с примером . Да, у сайта есть проблемы с рендерингом с правильной версткой, но он рендерится. Это пример тегов <script> в вашем файле html или просто необработанного файла. js. Похоже, что вы делали компонент Vue (.vue), но предпосылка остается такой же, пока вы определяете шаблон, в котором будет отображаться код Vue.

Редактировать:

Как выглядит ваш файл vue? Это то, что я ожидаю. 

<template id="foo">
     <div v-html="input"></div> 
</template>

<script>
export default {
    template:'#foo',
    data: { 
        input: null
    },
    created() {
        this.loadFile();
        },
    methods: {
        loadFile() {
            let _this = this;
            axios({
                method: "get",
                url: 'https://jsfiddle.net/',
            })
            .then(result => {
                console.log(result);
                _this.input = result.data;
                console.log("Data: " + result.data)
            })
            .catch(error => {
                console.error("error getting file: " + error);
            });
        },
    }
};
</script>
0 голосов
/ 15 января 2020

Причина в том, что оператор this.input = result.data пытается проанализировать result.data как json, но это не так. Отправьте json с сервера и правильно используйте его в своем коде.

...