No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Problems with q-input in UMD version

    Help
    2
    5
    557
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kuazaar last edited by 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 1 Reply Last reply Reply Quote 0
      • qyloxe
        qyloxe @kuazaar last edited by

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

        1 Reply Last reply Reply Quote 0
        • K
          kuazaar last edited by

          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 1 Reply Last reply Reply Quote 0
          • qyloxe
            qyloxe @kuazaar last edited by

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

            1 Reply Last reply Reply Quote 1
            • K
              kuazaar last edited by 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 ))))

              1 Reply Last reply Reply Quote 0
              • First post
                Last post