使用.NET（MVC）的模板实现（VUE）的问题

Question

使用.NET（MVC）的模板实现（VUE）的问题

May*_*ino 5 javascript asp.net-mvc vue.js

我正在尝试实现外部模板（创建HTML页面），但是我无法成功。该页面是一个包含Vue应用程序的ASP.NET MVC页面。

我想将此组件的模板部分移至外部文件，但是无论何时这样做都行不通。

以下内容（以下）可以正常工作，但是由于缺少文本编辑功能，因此不容易维护或构建。

Vue.component（'my-component'，{模板：'＃my-component'}

这是当前的代码，它可以完美地工作：

var foo = Vue.component('foo', {
template:'
<table class="table">
 <template v-for="(foo, ColName, index) in foos">
    <template v-if="index % 3 == 0">
        <tr>
        </tr>
    </template>
    <th>{{ColName}}</th>
    <td v-if="foo">{{foo}}</td>
    <td v-else> -- </td>
 </template>
</table>',
data: function () { 
  return {
    foos: null,
    NumColuns: 3 
  }
}, 
mounted() { 
 axios
  .get('/api/account/foo/')
  .then(response => {
    this.foos = response.data                
   })
  .catch(error => {
    console.log(error1)
      this.errored = true
  })
  .finally(() => this.loading = false)
}
});
var foo = new Vue({ 
  el: '#foo-vue' 
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 3

要从文件中获取 HTML 模板，您需要一个异步组件。

文档： https: //v2.vuejs.org/v2/guide/components-dynamic-async.html

在您的示例中，获取 HTML 并返回 Vue.component 工厂中的承诺。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>

<body>

  <div id="app">
    <foo></foo>
  </div>

  <script>
    var foo = Vue.component('foo', () => {
      return fetch('/template.html')
        .then((response) => response.text())
        .then((html) => {
          return {
            template: html,
            data: function () {
              return { foos: null, NumColuns: 3 }
            },
            mounted() {
              this.foos = [{ foo: 1, ColName: "A" }];
              //  axios.get('/api/account/foo/').then(response => {
              //     this.foos = response.data
              //    })
              //   .finally(() => this.loading = false)
            }
          };
        });
    });
    var foo = new Vue({
      el: '#app'
    });
  </script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

模板.html

<table class="table">
 <template v-for="(foo, ColName, index) in foos">
    <template v-if="index % 3 == 0">
        <tr>
        </tr>
    </template>
    <th>{{ColName}}</th>
    <td v-if="foo">{{foo}}</td>
    <td v-else> -- </td>
 </template>
</table>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，4 月前
查看次数：	161 次
最近记录：	6 年，4 月前