Проблема с реализацией шаблона (VUE) с использованием .NET (MVC) - PullRequest
Новая
       2

Проблема с реализацией шаблона (VUE) с использованием .NET (MVC)

5 голосов
/ 28 июня 2019

Я пытаюсь реализовать внешний шаблон (создание страницы HTML), но у меня ничего не получается.Эта страница является страницей ASP.NET MVC, которая содержит приложение Vue.

Я хочу переместить раздел template этого компонента во внешний файл, но всякий раз, когда я делаю это, он не 't work.

Следующее (ниже) работает, но его сложно поддерживать или дополнять из-за потери функций редактирования текста.

Vue.component ('my-component', {template: '# 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' 
});

Ответы [ 3 ]

2 голосов
/ 07 июля 2019

Если ваше представление является бритвенным шаблоном .cshtml, вы можете просто извлечь свой шаблон в html-файл и загрузить этот файл в представление ASP.NET MVC в виде необработанного html-кода, поскольку шаблон Vue является действительным html: 

<!-- in cshtml view -->
<script id="my-component" type="text/x-template">
    @Html.Raw(File.ReadAllText(Server.MapPath("~/Path/To/Template/my-component-template.html")))
</script>

И в вашем компоненте Vue он должен работать с template: '#my-component', как вы упомянули.

Документы: Vue: Edge Cases

P.S. Вы можете подготовить частичное представление для ваших компонентов или создать некоторый метод расширения, чтобы сделать код более читабельным и добавить некоторое кэширование.

2 голосов
/ 10 июля 2019

Лучшее, что вы можете сделать, - это настроить весь проект Vue, чтобы вы могли использовать файлы шаблонов .vue.Недавно я нашел статью, в которой подробно объясняется, как этого добиться, но она специально предназначена для расширений браузера.Шаги, которые вы должны предпринять для достижения этого, в данном случае, по большей части, идентичны, поэтому я все равно просто приведу здесь ссылку на статью: https://medium.com/javascript-in-plain-english/how-i-built-a-browser-extension-with-vue-part-2-2c4ab2dd752d.

По сути, выВы сами сконфигурируете проект Vue с помощью Webpack, чтобы скомпилировать файлы Vue в один файл app.js, на который вы затем будете ссылаться в своем файле (в учебнике этот файл является его app.html).Затем он внедрит свои компоненты в элемент #app и обработает все виртуальные манипуляции с DOM.

2 голосов
/ 05 июля 2019

Для извлечения шаблона HTML из файла необходим асинхронный компонент.

Документация: https://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>

template.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...