@metalsadman yayyy!!! It worked.
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!!!
@metalsadman yayyy!!! It worked.
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!!!
@metalsadman yayyy!!! It worked.
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!!!
Hey everyone,
I have to implement autocomplete feature to my address form. Whenever user types in the name field,
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.
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!
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’ }
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
})
Can someone please let me know what I am missing here?
@dobbel Thank you so much. I changed this to ‘options’ type and its working splendid
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.
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.
<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>