I'm trying to find a way to add a new value using v-select previously not in the list. So that the new value entered will become the selected option.
This is my current code:
<v-select
ref="systemSelect"
v-model="reservation.system"
name="system"
label="Select System"
:disabled="isBusy"
:options="systems"
#input="getSystems"
/>
In UI the component looks like this. Here I use Vuex only to get :options. Currently if I enter a new value and click outside that value disappears since its not found in the list
Expected: Would like to enter a new value and use this value as current in the form and save it. Is there a way to achieve this?
Any help would be appreciated.
Thanks!
If you're using vue select, you can use the attribute taggable and multiple to push your own options:
<v-select taggable multiple />
See this link:
https://vue-select.org/guide/values.html#tagging
Related
I am trying to create a questionnaire. I have an array of questions. Each question is an object. During the loop the <component :is> checks the component property inside the question object. If the property equals an Input for example then an input will be shown and so on.
This works for simple questions. However the last question requires a more complex layout. Here 'Please add items' needs to have two inputs and an add button. Once pressed a table will appear with each row displaying the values passed into the fields from above. At the moment I can't do this as I am looping though a sub set of questions.
There could be 1000+ questions eventually and I am not sure whether creating a component for each question is the right approach?
I know my current approach isn't right some how but I am completely stuck how to approach this. Is there a way of looping through data and providing unique layouts for each question? The data structure isn't set in stone so feel free to change it.
https://codesandbox.io/embed/blazing-wood-ifnxym?fontsize=14&hidenavigation=1&theme=dark
Within the v-for, you can wrap the elements in a <template>, and then just use v-if to determine which element is displayed.
For example :
<template v-for="question in question.questions" :key="question.id">
<Input v-if="quetion.type === 'text'" :question="question" />
<Radio v-if="quetion.type === 'choice'" :question="question" />
...
</template>
I am editing a vue for a project that I am working on. Below is my code
<tr v-for="(program, index) in selectedGantryLocation.pickPrograms">
<v-select :items="program"
:v-model="selectedGantryLocation.pickProgramValues[index]">
</v-select>
</tr>
The selectedGantryLocation.pickPrograms is a list of a list of strings. So each "program" that is being used in the iteration is an array of strings, it is nothing more and nothing less. The array generally looks like ["Program1","Program2","Program3" etc.]. The :items are being populated correctly and are displayed correctly in the dropdown.
Now because in this vue each dropdown will already have a previously selected value that I am grabbing from the backend, I need each dropdown to show the already selected value. selectedGantryLocation.pickProgramValues[index] is indexing a list of strings, each being the default value of each v-select that is created.
For some reason the v-model is not showing any default values. I have verified that the selectedGantryLocation.pickProgramValues is indeed populated and filled with strings. Is there an issue with assigning v-model to a string? If that is the case then I do not know how to go about fixing this issue as I have no more properties to reference because I am only working with lists of strings.
I also know that this won't work if the v-model value does not exist in the :items but I have also verified that it does exist here so that should not be an issue.
If anyone has any ideas of why my v-selects do not have any default values I would appreciate your feedback, thank you!
I have to show date field. After giving multiple true, the picker is showing wrong value.
Added code:
<v-date-picker :landscape="$store.state[parentName].landscape" v-model="$store.state[parentName].picker"
:multiple= "true"
#input="handleInput" >
</v-date-picker>
Please help me out. From where this 10 selected is coming. Where did i went wrong.
I think from your code, your v-model data, $store.state[parentName].picker already have any value.
You can see this value using Vue.js devtools.
If don't have any value on v-model, please anotate the comment.
If you already have any value, and you don't expect
You should clear the $store.state[parentName].picker in beforeMount or beforeCreate.
I need to get the entire array element that makes up the Autocomplete item, I want the element so I can store it in Veux without store each item, such as first name, MI last name etc. I'm going to build upon another question that was very similar that was posted here Vuetify v-select get item index and with the jsfiddle answer solution
my code that I'm using is:
<v-list-tile>
<v-autocomplete
v-model="data"
:allow-overflow="false"
:items="named_items"
:item-text="getFullName"
:loading="loadingMembers"
:debounce-search="0"
:search-input.sync="searchInput"
class="purple-input search-input"
default
color="purple"
autofocus
placeholder="Search..."
item-value="MemberID"
hide-no-data
no-data-text="Add New Member"
#change="changeMember"
#keyup.enter="hitEnter"
/>
</v-list-tile>
the jsfiddle is at https://jsfiddle.net/Roland1993/fg461d55/1/
and my question is when an item is selected is it possible to get the element that makes up the ID, Question and Answers? so the it can be stored as an array?
It is entirely possible, for example, you have already bound to events, but you can have the name or values of their targets.
See: Method Event handlers
Im using Vuetify in my project. When I insert some data by v-select its working fine. Also when Im edit that data that also works. The only problem is I cant see the selected element when Im click on Edit.
Here is my code
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="text"
item-value="customer.rating"
single-line
></v-select>
Note: If I use {{customer.rating}} it gives an output like this
{ "id": 1, "text": "Bad" }
and If I select a different element its perfectly change on database. So everything is fine. The only requirement is I want show this value Bad as a selected element when I click on Edit.
Here is the complete code of my project file
https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue
Thanks in advance