I'm trying to make rule to rearrangement attributes for Vue and I wanna set firstly attributes with value (something="value") and after this - boolean attributes.
All my googling have no results :(
Now:
<TagName
animated
color="primary"
flat
/>
But I want this:
<TagName
color="primary"
animated
flat
/>
Related
I have been trying to add image inside v-text-field, but it is causing an issue when I add it moves label to a bit of right side?
<v-text-field
ref="phone"
v-model="phone"
dense
outlined
disabled
color="black"
:rule="[requiredRule]"
:label="$t('10')"
>
<template #prepend-inner>
<v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"> </v-img>
</template>
</v-text-field>
as you can see label PHONE moves to right side it isn't staying on its place, I tried to add margin-top but didn't fix it.
This looks like an undocumented feature, which explains why the behaviour may be unexpected.
The cause of the seems to me is that the input calculates the width of the slot content at the time of rendering, which due to a race condition may resolve before or after the image is rendered. That's why if you render multiple times, you may not always see it behaving this way.
To get around it, I thing you should be able to wrap the image with another element of fixed width. (<div style="width:30px">)
<v-text-field
ref="phone"
v-model="phone"
dense
outlined
label="My Label"
>
<template #prepend-inner>
<div style="width:30px">
<v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"/>
</div>
</template>
</v-text-field>
I am customizing this dialog menu from the dialog behavior of q-select in quasar. but i cant figure out a way to remove this:
any idea how i should go about this? is this even possible?
You don't need to write extra CSS to just remove the label. You can just remove the label property and it will work.
<q-select color="purple-12" v-model="model" :options="options">
<template v-slot:prepend>
<q-icon name="event" />
</template>
</q-select>
label : String
Description
A text label that will “float” up above the input field, once the field gets focus
Nevermind guys I figured it out. I used .q-select__dialog label{ display: none } and it worked :D
Here's my v-autocomplete component.
<v-autocomplete
v-model="selectedPlace"
:items="locationList"
:search-input.sync="query"
color="#e1b753"
clearable
item-text="title"
item-value="id"
label="Address"
return-object
required
close-on-content-click
class="pt-3 pb-0"
item-width="200"
:filter="v => v"
#change="setPlace()"
#blur="setPlace()"
>
<template v-slot:item="data">
<template>
<v-list-item-content>
<v-list-item-title v-html="data.item.title" />
</v-list-item-content>
</template>
</template>
</v-autocomplete>
When it's empty and the user first sets their address it works just fine but if they reload the page the autocomplete field is empty. I want to set its value according to user's information I get from the server but I can't figure out how.
What I've tried so far:
Set locationList[0] to the item I need and used auto-select-fist on autocomplete. It shows the needed location in the dropdown but doesn't display the value in the input.
Same as first but also set v-model to "locationList[0]". It displays the value in the input but doesn't let me change or clear it. When I select and remove the text it just jumps back in.
I guess auto-select-first should do the job, but it doesn't, am I trying to use it wrong?
I want to use a phone icon (mdi-phone) as a prepend-inner in v-text-field.
I can write it like below and everything works fine:
<v-text-field
type="tel"
v-if="!numberIsEntered"
label="phone number"
clearable
required
color="#ff5b1b"
:rules="[
rules.required,
rules.internationalNumber,
rules.nationalNumber
]"
class="mt-10 mb-15"
v-model="userLoginDetails.userNumber"
outlined></v-text-field>
the icon in this code changes color with the input state changes. if there is an error and input changes color to red, the icon's color changes to red as well.
but I wanted the icon to be rotated so I added the below code in <v-text-field></v-text-field>:
<template v-slot:prepend-inner>
<v-icon style="transform:rotateY(-180deg)">mdi-phone</v-icon>
</template>
now the icon's color doesn't change with different input states (e.g: error,...).
is this a bug or there is way to fix it?
EDIT: This issue is being caused by vuetify overriding icon styles with dark theme properties. I rewrote the code as following:
<template v-slot:prepend-inner>
<i aria-hidden="true" class="v-icon notranslate mdi mdi-phone"
style="transform: rotateY(-180deg);"></i>
</template>
Try to pass the icon name as prop in order to take the same color of the input, then define a style rule to rotate the icon :
<v-text-field
type="tel"
class="phone-input"
prepend-inner-icon="mdi-phone"
...
outlined></v-text-field>
style :
.phone-input .v-icon{
transform:rotateY(-180deg)
}
LIVE DEMO
i am using v-autocomplete with autofocus.
<v-autocomplete
autofocus
solo
rounded
prepend-inner-icon="mdi-magnify"
#keyup.enter="showFilteredItems"
id="searchInput"
:items="stocks"
item-text="symbol"
item-value="name"
:filter="customFilter"
ref="autocomplete">
<template v-slot:item="data">
<v-btn block depressed :to="`/stock/${data.item.symbol}/`">
<v-list-item-title v-html="data.item.symbol"></v-list-item-title>
<v-list-item-subtitle v-html="data.item.name"></v-list-item-subtitle>
</v-btn>
</template>
</v-autocomplete>
the autocomplete work correctly when user click on it and then type the input:
but when user type the input without clicking on v-autocomplete, v-menu does not appear :
however relative events emitted as expected and items are filtered.
surprisingly i tried the same code in vue (not nuxt) and it works properly!
I think you can use :
:input-attrs="{'autofocus':true}"
like question below:
https://github.com/paliari/v-autocomplete/issues/27