vue.js - Vue.js + .netcore MPA

Question

我正在尝试使用 .netcore 和 vue.js 创建应用程序。我想使用 vue.js 进行数据加载和绑定，而不是创建 SPA。

在 _layout.cshtml 我有：

  <script>
        new Vue({
            el: '#app',
            data: {
                text: 'test'
            },
            methods: {
                custommethod: function () {
                    alert('a');
                }
            }
        })
    </script>

@RenderSection("Scripts", required: false)

在我的 Page1.cshtml 我有>

    <div id="childapp">

        <h1>Page 1</h1>

        <button id="vueButton" @@click="custommethod"> {{ text }} </button>
        <button id="vueButton" @@click="custommethod"> {{ textaa }} </button>

        <div id="button-counter"></div>
    </div>

@section Scripts
{
    <script>
        Vue.component('childapp',
            {
                data: function() {
                    textaa: 'component text'
                }
            })
    </script>

但我在 JS 控制台中收到错误消息：

vue.js:634 [Vue 警告]：属性或方法“textaa”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https ://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。

你知道有什么问题吗？

标签： vue.js.net-core

Answer 1

我相信你的数据函数必须返回一个对象，所以：

Vue.component('childapp',
{
    data: function() {
        return {
            textaa: 'component text'
        }
    }
}