I have a problem
I have a api that I took countries
text(string) and value(number) information is coming in this api
and I have a number value
I want it to find the number value I have and the value (number) I pulled from the api.
how can I do that
currently the ones coming from the api are listed
<Multiselect
ref="multiselectRef"
:disabled="disabled"
v-model="value"
:options="options"
:mode="mode"
:valueProp="valueProp"
:label="labelProp"
:trackBy="trackBy"
:name="name"
:searchable="searchable"
:loading="loading"
:tabindex="tabindex"
:noOptionsText="noOptionsText"
#select="$emit('select', $event)"
#change="change"
:placeholder="placeholder"
class="multiselect__item"
/>
my component
<KbsMultiSelect
track-by="text"
name="country_id"
:options="country"
labelProp="text"
label="Ülke"
placeholder="Ülke Seçiniz"
valueProp="value"
/>
Related
I have a v-select with four items to choose different dates. The last item in the select is for choosing a manual date and then I want a menu/dialog to pop open with a date picker. But I can't get that to work...
<v-select
v-model="dates"
:items="items"
clearable
hide-details
:label="$tc('Dates')"
>
<v-menu
v-model="showDatePicker"
:close-on-content-click="false"
>
<template #item="{ item, on, attrs }"
><v-list-item v-attrs="attrs" v-on="on">{{ item.text }}</v-list-item>
</template>
<v-date-picker v-model="dates" #input="showDatepicker = false" />
</v-menu>
</v-select>
I've tried many different things but this is the latest one. Anyone that knows how to solve this? :)
I propose to use v-select component.
With a watcher on the selected value, you can use v-if for the date picker with a boolean value that changes to true when you pick the selected value to open the date picker.
Else the value will be false and the date picker will get v-if="false"
i am using vuetify and his component combobox for search action on website.
when i am typing something in combobox text value add in watcher only when event mouse exit, it does not good for me, because if user typed smthing in this field then clicked on button search nothing happening, only on second click search will work
<v-combobox
dense
v-model="watcher"
items="ItemsArray"
item-text="ItemsArray.item_name"
label="item name"
/>
<v-btn #click="Search">Search</v-btn>
add ":" for the before items. such as,
<v-combobox
dense
v-model="watcher"
:items="ItemsArray"
:search-input.sync="search"
item-text="ItemsArray.item_name"
label="item name"
/>
<v-btn #click="Search">Search</v-btn>
I am attempting to build a Vuetify form that enables inputting of a date format that includes both the date and specific time of the event, for both starting and ending. So far, I have the following:
<v-form #submit.prevent="addEvent">
<v-text-field v-model="eventName" type="text" label="event name (required)"></v-text-field>
<v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
<v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
<v-btn type="submit" color="primary" class="mr-4" #click.stop="dialog = false">
Add Event
</v-btn>
</v-form>
Is there an input type that allows both date and time to be inputted into the same input field? If so, how can I implement such a field? Thanks!
There are Vuetify components for picking a date and time, but no combined one.
There is a basic html component you could check out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
Otherwise you'll have to make a custom one.
In HTML way, you can use datetime-local as type
<input type="datetime-local" name="datetime">
Is there an input type that allows both date and time to be inputted into the same input field?
The v-text-field component in Vuetify lets you select date and time together if you set type="datetime-local" instead of "date".
Explanation of datetime-local: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
I'm currently using a Vue multiselect by loading it with options from an axios return object into taskLocations:
<multiselect
v-model="taskLocations"
:options="locationOptions"
:multiple="true"
placeholder="Please choose at least one location"
label="name"
track-by="id">
</multiselect>
This works perfectly but I'm now loading the page with another response that I've assigned to editDetails[] in my data return, and while that works in order to dump data for confirmation, I can't figure out how to keep the multiselect list of options from taskLocations while also preopopulaitng the value for the multiselect with editDetail.location
<multiselect
v-for="editDetail in editDetails"
v-model="taskLocations"
:options="locationOptions"
:multiple="true"
placeholder="Please choose at least one location"
label="name"
track-by="id">
</multiselect>
How can I do this?
I have an Element UI input in a VueJS component.
Currently, no matter what I've tried, it's returning a string. I need a Decimal. How's this done in VueJS?
Here's the input:
<el-input id="initial-percent-input" type="number" min="0" max=100 :value="initialPercentState"
v-model.number="initialPercentState"
#keyup.native="turnOffColumnPercent" #click.native="turnOffColumnPercent"
#change="changeInitialPercent"
>
<template slot="append">%</template>
</el-input>
I've tried binding as explained here:
https://v2.vuejs.org/v2/guide/components.html#Literal-vs-Dynamic
I've tried v-model.number
I'm still returning a string??