Vue.js + .netcore MPA

0
votes

I am trying to create application with .netcore and vue.js. I would like to use vue.js for data loading and binding, not create the SPA.

In _layout.cshtml i have: 

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

@RenderSection("Scripts", required: false)

and in my Page1.cshtml I have>

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

But I am getting in JS console the error message:

vue.js:634 [Vue warn]: Property or method "textaa" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Do you have any idea what is wrong?

1
vue.js.net-core

1 Answers

0
votes

I believe your data function must return an object so:

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