如何在我的.cshtml页面中调用Vue组件？开发者社区

文章/答案/技术大牛

发布

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

 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.
       });

    @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> 
                                     <th class="pull-right">
                                       Test Header 
                             </thead>
                             <tbody>
                                <tr v-if="isShowRow"> 
                                     <th class="pull-right">
                                       Test Header AGAIN 
                                     <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()
                             </tbody>
                           </table>
            </script>
@section Scripts {
        <script src="@Url.Content("~/js/testComponent.js")"></script>
    }

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 
};

<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>

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

// BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles)

问 如何在我的.cshtml页面中调用Vue组件？ EN

回答 1

Stack Overflow用户