Add component in a separate script



  • Hi, i use quasar UMD framework v1.0 in a AspNet Core application. I have a shared page where i use a layout page:

    <div id="main-quasar">
            <template>
                <q-layout view="hHh lpR fFf">
                    <q-header elevated class="bg-primary text-white">
                        <q-toolbar>
                            <q-toolbar-title>
                                <q-avatar>
                                    <img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg">
                                </q-avatar>
                                Title
                                <q-btn type="a" href="@UrlHelperExtensions.Action(Url,"index","home")" label="Home"></q-btn>
                            </q-toolbar-title>
                        </q-toolbar>
                    </q-header>
                    <q-page-container>
                          @RenderBody()
                    </q-page-container>
                    <q-footer elevated class="bg-grey-8 text-white">
                        <q-toolbar>
                            <q-toolbar-title>
                                <q-avatar>
                                    <img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg">
                                </q-avatar>
                                Title
                            </q-toolbar-title>
                        </q-toolbar>
                    </q-footer>
                </q-layout>
            </template>
        </div>
        <script>
    
            new Vue({
                el: '#main-quasar',
                data: function () {
                    return {
                    }
                },
                methods: {
                   
                    }
                },
            })
        </script>
    
    

    The body page is in a different file with a quasar component and related script part:

    <div id="q-login-form">
        <div class="q-pa-md" style="max-width: 400px">
            <form id="account" method="post">
                <q-input filled
                         label="Your email"
                         v-model="email"
                         typeof="email"
                         hint="email"
                         name="Input.Email"></q-input>
                <q-input filled
                         v-model="password"
                         type="password"
                         name="Input.Password"
                         label="password"
                         lazy-rules>
                </q-input>
                <div>
                    <q-btn label="Submit" type="submit" color="primary"></q-btn>
                    <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm"></q-btn>
                </div>
            </form>
    </div>
    </div>
    <script>
        new Vue({
            el: '#q-login-form',
            data() {
                return {
                    email: '',
                    password:''
                }
            },
            methods: {
    
                onReset() {
                    this.name = null
                    this.age = null
                    this.accept = false
                }
            }
        })
    </script>
    

    But the Vue nested does not work. How can insert nested component in a shared page with different file?


Log in to reply