Question

我正在尝试将vue.js与asp.net MVC集成。如标题所示，组件变量有问题。

我做了一个简化的代码，向大家展示我在说什么。

这是我的“关于页面”，其中包含一些消息和组件：

<h3>VueJS 2 in ASP.NET MVC 5</h3>
<div id="aboutPage">
    <el-row>
        <el-col>
            <p>
                {{ message }}
            </p>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <p>
                <smpl-component></smpl-component>
            </p>
        </el-col>
    </el-row>
</div>

<script src="~/Scripts/smpl-component.js"></script>

<script type="text/x-template" id="smpl-template">
    <p><button v-on:click="counter += 1">Add One More Click</button></p>
    <p>The button has been clicked {{ counter }} times</p>
</script>



<script>
    var aboutPage = new Vue({
        el: '#aboutPage',
        data: {
            message: 'Hello Vue! in About Page'
        }
    });
</script>

smpl-component.js中的代码很简单：

Vue.component('smpl-component', {
    template: '#smpl-template',
    data: {
        counter: 0,
    }
});

这很简单，但是却给我错误：

ReferenceError：未定义计数器。

发生错误的原因是因为在About.cshtml js内的aboutPage文件中，我没有counter变量。

我正在努力进行第二天的努力。

它唯一起作用的方法是当我定义这样的组件时：

Vue.component('smpl-component', {
    template: '<p><button v-on:click="counter += 1">Add One More Click</button></p>
    <p>The button has been clicked {{ counter }} times</p>',
    data: {
        counter: 0,
    }
});

但是我不喜欢这种方式，因为在我的头项目中，该组件将包含更多代码。

我该如何以任何巧妙的方式使其工作？

未为组件内部变量定义Vue参考

0 个答案: