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
    1. Home
    2. vijay
    V
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 7
    • Best 1
    • Groups 0

    vijay

    @vijay

    1
    Reputation
    1
    Profile views
    7
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Location India Age 23

    vijay Follow

    Best posts made by vijay

    • RE: Google Autocomplete VS Q-Select

      @metalsadman yayyy!!! It worked.

      bfd4e5e9-5faa-400a-8298-d0c3f3e0fdd4-image.png

      I targeted the inner Input tag element and passed it in the request to Google. Voila its working!!! Now I can make it work alongside with q-select tag too. Thankyou very much. Damn QUASAR is simply WOW!!!

      posted in CLI
      V
      vijay

    Latest posts made by vijay

    • RE: Google Autocomplete VS Q-Select

      @metalsadman yayyy!!! It worked.

      bfd4e5e9-5faa-400a-8298-d0c3f3e0fdd4-image.png

      I targeted the inner Input tag element and passed it in the request to Google. Voila its working!!! Now I can make it work alongside with q-select tag too. Thankyou very much. Damn QUASAR is simply WOW!!!

      posted in CLI
      V
      vijay
    • Google Autocomplete VS Q-Select

      Hey everyone,

      I have to implement autocomplete feature to my address form. Whenever user types in the name field,

      1. Need to check if the data is already available from my DB. If so I need to use the Q-Select to show the available addresses(completed this). Please refer below.
        68fe7eb6-51c9-42cd-a757-14f59ca6ed6a-image.png
      2. If NO DATA returned from API, I need to call Google API to get the address location which user has typed. Please refer below.
        6e2754e9-9851-452f-ae76-495ef10951f2-image.png

      Since Google maps API primarily uses the <input> tag for showing the results, its giving me the following error since I am trying to achieve this in Q-select tag.
      e6d7f212-106d-4d6c-96f5-2ccb6dfadfeb-image.png
      I need to have both this feature in a single input field.

      If someone has any thoughts / ideas on this, please let me know. Thanks!

      posted in CLI
      V
      vijay
    • Transition group in q-table

      Hi, I am trying to apply animations/transitions in the q-table using the transition-group. It’s not working as expected. While adding a new row to the table, animation should be applied.
      Can someone let me know what I am missing here?

      <transition-group appear enter-active-class="animated fadeIn">
                      <q-table
                        class="q-mt-md"
                        :dense="$q.screen.lt.md"
                        title="Test"
                        :data="data"
                        :columns="columns"
                        hide-bottom
                        :pagination="pagination"
                        row-key="index"
                        key="index"
                      >
      </transition-group>
      

      I have enabled this in quasar.config.js too. { animations: ‘all’ }

      CDN Example

      posted in Framework
      V
      vijay
    • Firebase Database Update creating a new node(duplicate node)when trying to update a specific node value

      Hi!!! I have a users object, in that I am trying to update a specific node(status) by using the firebase update(payload) method. But when I try to do that, instead of updating the value in the parent node, it creates a new child node(duplicate node) with the value being updated there.

      let firebaseApp = firebase.initializeApp(firebaseConfig);
      let uniqueID = "OEHCrSnKFrd87JDivvA0sLMnj8u1"
      firebaseApp.database()ref("users/" + uniqueID).update({
          status: false
        })
      

      d1082af8-f4bf-41f5-9f46-1dadaf745277-image.png

      Can someone please let me know what I am missing here?

      posted in CLI
      V
      vijay
    • RE: How to block the data filling in Q-select Autocomplete while scrolling thru the available items?

      @dobbel Thank you so much. I changed this to ‘options’ type and its working splendid 🙂

      posted in Help
      V
      vijay
    • RE: How to block the data filling in Q-select Autocomplete while scrolling thru the available items?

      @dobbel

      Thank you for your response. Yes I have used hide-selected in the above code and it works for the input we type in. Is there a way to hide the input filling while scrolling thru the suggested list items? In this case I wont be using the ‘multiple select’ type.

      posted in Help
      V
      vijay
    • How to block the data filling in Q-select Autocomplete while scrolling thru the available items?

      I have a address component in which NAME should has both input and auto-complete type(so that the user can select / type in the address)…The address I am showing in the drop-down will be of formatted type. Is there a way to block the data filling in the input field while scrolling thru the available address items.

      Screenshot_1.png

      <html>
      
      <head>
        <link href="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.css" rel="stylesheet" type="text/css">
      </head>
      
      <body>
        <!-- Add the following at the end of your body tag -->
      
        <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.umd.js"></script>
      
      
        <div id="q-app">
          <div class="row justify-around q-mt-lg">
            <div class="col-5">
              <label for="name" class="q-mt-md">Name</label>
              <q-select class="q-pa-md-none" v-model="CompanyName" :key="addressKey" dense use-input fill-input outlined
                hide-selected hide-dropdown-icon input-debounce="0" :options="AddressDetailsData" option-value="name"
                option-label="value" emit-value @filter="filterAddress" @input-value="setCompanyName" @input="AddressChange">
              </q-select>
              <label for="Street" class="q-mt-md">Street</label>
              <q-input dense outlined v-model="Street"></q-input>
      
              <label for="City" class="q-mt-md">City</label>
              <q-input dense outlined v-model="City"></q-input>
      
              <label for="State" class="q-mt-md">State</label>
              <q-input dense outlined v-model="State"></q-input>
      
              <label for="zipcode" class="q-mt-md">Zipcode</label>
              <q-input dense outlined v-model="ZipCode"></q-input>
            </div>
          </div>
        </div>
      </body>
      <script>
        new Vue({
          el: '#q-app',
          data: function () {
            return {
              CompanyName: "",
              addressKey: "",
              State: "",
              City: "",
              Street: "",
              ZipCode: "",
              AddressDetailsData: [],
              AddressDetails: [
                {
                  Name: "Name 1",
                  State: "State 1",
                  City: "City 1",
                  Street: "Street 1",
                  ZipCode: "ZipCode 1"
                },
                {
                  Name: "Name 2",
                  State: "State 2",
                  City: "City 2",
                  Street: "Street 2",
                  ZipCode: "ZipCode 2"
                },
                {
                  Name: "Name 3",
                  State: "State 3",
                  City: "City 3",
                  Street: "Street 3",
                  ZipCode: "ZipCode 3"
                },
              ]
            }
          },
          methods: {
            filterAddress(val, update, abort) {
              if (val.length < 3) {
                abort();
                return;
              }
              update(() => {
                const itemValue = val.toLowerCase();
                this.AddressDetailsData = [];
                this.AddressDetails.forEach(item => {
                  if (item && Object.values(item).toLocaleString().toLocaleLowerCase().includes(itemValue)) {
                    let itemDesc = item.Name.bold() + "<br/>" + item.Street + "<br/>"
                      + item.City + ',' + item.State + ' ' + item.ZipCode + ' ';
                    this.AddressDetailsData.push(
                      { name: JSON.stringify(item), value: itemDesc }
                    )
                  }
                });
              }
              )
            },
            setCompanyName(value) {
              if (value.includes('<br/>')) {
                this.AddressDetailsData.forEach(row => {
                  if (row.value === value) {
                    this.$forceUpdate(); //forcing to rerender to update values
                    this.CompanyName = (JSON.parse(row.name)).Name;
                    return;
                  }
                })
              } else {
                this.CompanyName = value;
              }
            },
            AddressChange(item) {
              this.addressKey = item;
              let addressitem = JSON.parse(item);
              this.CompanyName = addressitem.Name;
              this.Street = addressitem.Street;
              this.City = addressitem.City;
              this.State = addressitem.State;
              this.Street = addressitem.Street;
              this.ZipCode = addressitem.ZipCode;
            }
          },
          created() {
            console.log(this.AddressDetailsData);
          }
        })
      </script>
      
      </html>
      
      posted in Help
      V
      vijay