Problems with q-input in UMD version

kuazaar

Hi there!
I’m newbie in js and especialy in vue. And I’ve got a problem using Quasar in my frontend app.
I’ve used Quasar to render the form in my app in this way:

        <form method="post" name="registration_form">
        <template>
            <q-form>
            <q-input v-model="username" label="Username" name="username"></q-input>
            <q-input label="e-mail" name="email"></q-input>
            <q-input label="Password" name="plainPassword"></q-input>
            <q-input label="Password one more time" name="password2"></q-input>
            <br>
            <q-btn type="submit" label="Submit" outline push color="grey-9" />
            </q-form>
        </template>
        </form>

and got an error ReferenceError: “username is not defined” and blank page.

If I remove v-model=“username” from the q-input, the page renders correctly, no errors in browser console. But after filling the field and TAB to next one, text disappears.

I’ve tried LOTS of searches in google, but none guides helped. What am I doing wrong?

Thanks for help in advance

qyloxe

@kuazaar looks like a Vue problem with component registration/using. You need to post the whole page code.

kuazaar

ok, here it is

This is the base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
        <link href="https://themify.me/wp-content/themes/themify-v32/themify-icons/themify-icons.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.min.css" rel="stylesheet" type="text/css">
        <script type="module" src="https://apple.wfonline.ru/assets/js/exports.js"></script>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}

    </head>
    <body>
    <div id="q-app">
    <template>
        <div class="q-pa-md">
            <q-layout view="lHh Lpr lFf"  class="shadow-2 rounded-borders">
                <q-header reveal elevated>
                    <q-toolbar class="bg-grey-9 text-white shadow-2 rounded-borders">
                        <q-btn flat label="Home"></q-btn>
                        <q-btn flat label="Topic list"></q-btn>
                        <q-btn flat label="User list"></q-btn>

                        <q-space></q-space>
                        <q-btn type="a" href="{{ url('app_register') }}" flat label="Sign in"></q-btn>
                        <q-btn type="a" href="{{ url('app_login') }}" flat label="Log in"></q-btn>
                    </q-toolbar>
                </q-header>
                {% block body %}{% endblock %}
            </q-layout>
        </div>
    </template>
    </div>
        {% block javascripts %}{% endblock %}
        <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.ie.polyfills.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.umd.modern.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/lang/ru.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/icon-set/themify.umd.min.js"></script>

        <script>
            Quasar.lang.set(Quasar.lang.ru)
            Quasar.iconSet.set(Quasar.iconSet.themify)
            new Vue({
                el: '#q-app',
                data: function () {
                    return {}
                },
            })
        </script>
    </body>
</html>

here’s the body:

{% extends 'site/base.html.twig' %}

{% block title %}Sign in{% endblock %}

{% block body %}


    {% for flashError in app.flashes('verify_email_error') %}
        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
    {% endfor %}

    <div class="row">
        <div class="col-md-6 offset-md-3"><h1>Sign in</h1></div>
    </div>
<div class="row">
    <div class="col-md-2 offset-md-3">
        <form method="post" name="registration_form">
                <template>
                    <q-form>
                    <q-input v-model="username" label="Username" name="username"></q-input>
                    <q-input label="e-mail" name="email"></q-input>
                    <q-input label="Password" name="plainPassword"></q-input>
                    <q-input label="Password one more time" name="password2"></q-input>
                    <br>
                    <q-btn type="submit" label="Submit" outline push color="grey-9" />
                    </q-form>
                </template>
        </form>
    </div>
</div>
{% endblock %}

and the exports.js:

export default {
    data () {
        return {
            text: '',
            username: '',
        }
    }
};

Any ideas?

qyloxe

@kuazaar said in Problems with q-input in UMD version:

it looks like something similar to jinja.

The problem is here:

 <script type="module" src="https://apple.wfonline.ru/assets/js/exports.js"></script>

You are using a global Vue object, so the declaration od vue’s data should go somehow into this:

                data: function () {
                    return {}
                },

Obviously it doesn’t. So you have several options. Your ‘module’ way is not obvious for me. If you are using templating system then you can also write in other pages (body) something like this:

{% block vue-data %}
    data () {
        return {
            text: '',
            username: '',
        }
    }
{% endblock %}

and modify base.html.twig like this:

        <script>
            Quasar.lang.set(Quasar.lang.ru)
            Quasar.iconSet.set(Quasar.iconSet.themify)
            new Vue({
                el: '#q-app',
                {% block vue-data %}{% endblock %}
            })
        </script>

This is the simplest solution. The more advanced would be using something like your script module with data, but loaded on other pages and also initialized in base.html.twig.

However, the preferred solution would be of course using other vue components (your form for example) with their own data for example like this;

<script type="x-template" id="templateHeader">
        <form method="post" name="registration_form">
                    <q-form>
                    <q-input v-model="username" label="Username" name="username"></q-input>
                    <q-input label="e-mail" name="email"></q-input>
                    <q-input label="Password" name="plainPassword"></q-input>
                    <q-input label="Password one more time" name="password2"></q-input>
                    <br>
                    <q-btn type="submit" label="Submit" outline push color="grey-9" />
                    </q-form>
        </form>
</script>

<script>
      Vue.component('section-header', {
         data: function () {
           return {
               text: '',
               username: ''
           }
         },
         template: '#templateHeader',
         methods: {
         }
      })
   </script>

In main code you would just use <section-header></section-header> then. Beware, that in UMD you do not need template tag as with SFC in Vue.

kuazaar

I resolved the problem in this way: added variables right in the init.

    <script>
        new Vue({
            el: '#q-app',
            data: function () {
                return {
                    text: '',
                    username: '',
                    email: '',
                    plainPassword: '',
        }
},
</script>

Hope it would be helpful for somebody with the same issue ))))