Vue. js + .netcore MPA

Question

Я пытаюсь создать приложение с .netcore и vue. js. Я хотел бы использовать vue. js для загрузки и привязки данных, а не создавать SPA.

В _layout.cs html у меня есть:

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

@RenderSection("Scripts", required: false)

и в мой Page1.cs html У меня>

    <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 warn]: свойство или метод "textaa" не определены в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. См .: https://vuejs.org/v2/guide/reactivity.html#Declaring -Reactive-Properties .

У вас есть идеи, что не так?

Answer 1

Я считаю, что ваша функция данных должна возвращать объект так:

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