如何获取与vue.js本地的HTML文件？

Question

我试图加载具有vue.js一个HTML文件，并添加到我的模板。

我尝试：

HTML：

<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/Static/content/css/foundation.css">
    <link rel="stylesheet" type="text/css" href="/Static/content/css/spaceGame.css">

</head>

<body>
    <div id="app">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="large-12 cell">
                    <h1>Welcome to Foundation</h1>
                </div>
            </div>
        </div>

        <div class="grid-x grid-padding-x">
            <div class="large-4 columns"></div>
            <div class="large-8 columns">
                <component :is="currentView"></component>
            </div>
        </div>

    </div>
    <!-- Footer -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/Static/scripts/foundation.js"></script>
    <script type="text/javascript" src="/Static/scripts/what-input.js"></script>

    <script type="text/javascript" src="/Static/scripts/space.js"></script>
</body>

</html>

脚本：

$(function() {
    $(document).foundation()

    var myData = '../../Views/login.html';
    Vue.component('manage-posts', {
        template: myData,
    })

    Vue.component('create-post', {
        template: '#create-template'
    })

    new Vue({
        el: '#app',
        data: {
            currentView: 'manage-posts'
        }
    })

});

错误：

上面我得到如下：

组件模板需要一个根元素，而不仅仅是文字。

改变var myData = '../../Views/login.html';

至

 var myData = '<div>../../Views/login.html</div>';

摆脱该错误的，但...我怎么加载实际的html文件？

我是新来的单页的应用程序并vue.js，一直在这一段时间，现在并不能弄明白。

编辑：

我试图装入的HTML文件：

<div>
    <template id="manage-template">

    <form>
        <div class="sign-in-form">
            <h4 class="text-center">Sign In</h4>
            <label for="sign-in-form-username">Username</label>
            <input type="text" class="sign-in-form-username" id="sign-in-form-username">
            <label for="sign-in-form-password">Password</label>
            <input type="text" class="sign-in-form-password" id="sign-in-form-password">
            <button type="submit" class="sign-in-form-button">Sign In</button>
        </div>
    </form>
</template>
</div>

编辑2：

如果这对答案，我只是想指出，任何影响：使用VS-代码，网站在IIS中运行，没有Node.js的用在这里。

Answer 1

Vue公司提供asynchronously creating的手段的成分。您可以使用，在这种情况下从服务器检索您的模板。

在这个例子中的代码，我会用爱可信检索模板，但你可以使用任何你喜欢的库。

Vue.component('manage-posts', function(resolve, reject){
  axios.get("../../Views/login.html").then(response => {
    resolve({template: response.data})
  })
})

Answer 2

当你点了模板'../../Views/login.html'模板是litterly与../../Views/login.html值的字符串，所以你需要一种方式来获得一个javascript变量中的文件数据。你可以用RequireJS做到这一点，或使用PHP填充模板（使用前。file_get_contents）

获取数据的一个简单的例子是：

var template_data = "<?php echo file_get_contents('../../Views/login.html'); ?>";
console.log(template_data);

测试例子，检查浏览器的控制台，您也可以在通过Ajax加载它。

Answer 3

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

data: function() {
    return {
      fileName: "terms.html",
      input: ""

    };
  },
     created() {
        this.fileName = this.$route.params.fileName;
        this.loadFile()
    }
    computed: {
        compiledHtml: function() {
          return this.input;
        }
      },
    methods: {

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

此代码的工作。诀窍是在计算的变量

如何获取与vue.js本地的HTML文件？

问题描述投票：2回答：3

3个回答

最新问题

如何获取与vue.js本地的HTML文件？

问题描述 投票：2回答：3

3个回答

最新问题

问题描述投票：2回答：3