Как вызвать компоненты Vue на моих страницах .cshtml? - PullRequest
Новая
       9

Как вызвать компоненты Vue на моих страницах .cshtml?

3 голосов
/ 24 мая 2019

У меня есть проект ASP.NET Core MVC в сочетании с Vue.js. Я использую только Vue.js, чтобы сделать мои страницы реактивными. Моя цель - создать основной экземпляр vue на основе div в файле _layout.cshtml, а затем создать компоненты Vue с помощью X-шаблонов и использовать их в моем веб-приложении. Стоит отметить, что мне хотелось бы иметь логику JS Vue.Component () в своем собственном файле .js, потому что некоторые из этих компонентов будут содержать большое количество логики js.

Проблема, с которой я сталкиваюсь, состоит в том, чтобы заставить Vue зарегистрировать / распознать мои компоненты, когда я вызываю их из .cshtml, который я хочу использовать. Я нашел это сообщение linkoverflow, показывающее, как должна быть логика для этой работы, но его пример показывает логику JS внутри cshtml, чего я пытаюсь избежать, и нет примера того, как вызвать компонент vue с другой страницы.

Я получаю ошибку ... [Vue warn] Не удалось смонтировать компонент: не определен шаблон или функция рендеринга

Технический стек:

  • ASP.NET Core MVC (2.2)
  • Vue.js (2.6.10)
  • Vue-template-compiler (2.6.10)
  • Vue-loader (15.7.0) <- Не уверен, нужно ли мне это или нет. </li> * * Аксиос тысячу двадцать-один (0.18.0) * +1022 *
  • Babel / Core (7.4.4)
  • Babel / polyfill (7.0.0) <--- Мой интерфейс должен работать в IE11, и я использую асинхронные функции в моем JS </li>
  • WebPack (4.26.0)

Вот мой главный _layout.cshtml 

    <div id="main-app">
     @RenderBody() 
    </div> 
@section Scripts {
    <script src="@Url.Content("~/js/mainVueApp.js")"></script>

}

Вот мой mainVueApp.js 

 import Vue from 'vue';
    import myComponent from 'testComponent';

        new Vue({
         el: 'main-app',
         components: {
            myComponent 
            // I also tried, thisIsMyComponent: myComponent. No luck with that either.
          }
       });

Вот мой _vueTestComponent.csthml 

    @model TestViewModel 

        <script type="text/x-template" id="my-test-component-id">
                <div class="card">
                    <div class="card-header"> My Test Header </div>

                    <div class="card-body">
                           <table class="table"> 
                             <thead> 
                                  <tr> 
                                     <th class="pull-right">
                                       Test Header 
                                     </th>
                                  </tr>
                             </thead>

                             <tbody>
                                <tr v-if="isShowRow"> 
                                     <th class="pull-right">
                                       Test Header AGAIN 
                                     </th>

                                     <tr class="pull-right">
                                         @(Html.Kendo.CurrencyTextBoxFor(m => 
                 m.TestProperty).HtmlAttributes(new Dictionary<string, object>{
                                 {"id", "test-text-box"},
                                 {"class", "textbox-input"},
                                 {"v-model", "testTextBoxValue"}
                                 }).Deferred()
                                 )
                                     </tr>
                                  </tr>
                             </tbody>
                           </table>
                     </div>
                </div>
            </script>
@section Scripts {
        <script src="@Url.Content("~/js/testComponent.js")"></script>

    }

Вот мой testComponent.js 

import Vue from 'vue';
import axios from 'axios';

let testComponent = Vue.Component('my-component', {
    template: 'my-test-component-id',
    data: function() {          
       return {
      testTextBoxValue : 'Test Value',
      isShowRow: true
     }

   },
    methods: {
    // Nothing for now....
 }
});

//I tried it without default, but it doesn't work either :(
export default {
testComponent 
};

Вот мое представление, которое вызывает компонент TestViewForVue.cshtml 

<div class="row"> 
  <div class="col-12">
      @* Call the Component *@
      @* Do I need to load the .cshtml where this component lives first, as a partial view or something? *@
       <my-component> </my-component>
  </div>
</div>

1 Ответ

0 голосов
/ 02 июля 2019

Это немного меняет вашу структуру (не используя синтаксис сценария x-template), но у меня это сработало.Попробуйте, если можете.

Поскольку вы хотите повторно использовать этот компонент, в вашем случае, возможно, будет нормально зарегистрировать его глобально.

Использование здесь литерала шаблона, поэтому необходимочтобы убедиться, что вы правильно переносите данные для IE11 

// testComponent.js

Vue.component("my-component", {
  template: `
        <div class="card">
          <div class="card-header"> My Test Header </div>
        </div>
      `,
  data () {
    return {}
  },
  // ...
})

Затем в вашем App_Start / BundleConfig.cs создайте пакет для ваших глобальных компонентов и визуализируйте этот пакет в ваших сценариях рендеринга _layout.cshtml. 

// BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new ScriptBundle("~/bundles/vuecomponents").Include(
    "~/Scripts/VueComponents/testComponent.js"
  ));
}

// _layout.cshtml

@Scripts.Render("~/bundles/vuecomponents")

Теперь вы сможете включать <my-component /> на любые страницы .cshtml в своем приложении.

...