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.
Related
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 a select input. and checkbox-list in vuejs form. Checkbox list depend on what is chosen in select. The problem is that if i check let's say 1 or 2 checkboxes, after I change select, 1 or 2 checkboxes will always stay checked despite the fact that values and labels of checkboxes have already changed. It looks like it doesn't build new checkboxes with new 'checked' attribute.
Select has onChangefunction() in which I change list of items to be checked in checkbox list. Checked() function in checkbox checks whether this exact element should be checked and returns true or false
<select #change="onChange" ...
<input type="checkbox" :checked="checked()" ...
The thing is that even if checked() function will always just return false, the checkbox will stay checked after I manually checked it on the page however many time I will change select input choice
To really give a good answer, I think a bit more information might be required. That being said, it looks like you're binding is incorrect. Your input line probably should be:
<input type="checkbox" :checked="checked" ...
So your checked function shouldn't have parens on it.
If that's not the issue, please post the rest of your component so we can see the script and data values.
Agreed with #DRich here but you can use #input method to call a method
<select #input="onChange" ...
I use this most of the time
I have two datepickers in my code and i change them between each other by another parameter(duration which can be Single day or Multi day). By default it set as Single day. First calendar have right position, but when i change from single day to multi day and open range datepicker, calendar which have absolute position sets in top left corner of page (with top:0;left:0 parameters).
I tried change directive v-if to v-show in my code below, and it helps, but there is another problem. For some reason element-ui think that picked value is not range and throw parse error. So i need another solution.
That's piece of code with this datepickers:
<el-date-picker
v-if="duration === durations.SingleDay"
placeholder="Enter date"
value-format="yyyy-MM-dd"
#input="updateTime($event, 'dateValue')"
:value="value.dateValue"
></el-date-picker>
<el-date-picker
v-else-if="duration !== durations.SingleDay"
placeholder="Enter date"
type="daterange"
value-format="yyyy-MM-dd"
:value="value.dateValue"
#input="updateTime($event, 'dateValue')"
></el-date-picker>
I want to positionate range datepicker as usual, like in datepicker in Single day parameter.
FIDDLE
Demo on fiddle, first open calendar and change type and reopen it, you can see this bug
In that case, there're two ways to solve this:
Change v-if to v-show
Add different key attributes to the Datepicker components (Vue will know that this is two different components)
In fact, this is not a bug. You use the same component in v-if and v-else. The two component properties are basically the same, so Vue will reuse the previous components, but you should avoid multiplexing complex components in Vue. It's easy to go wrong, which is why you must add a key in v-for in vue.
You did not modify the internal reference this.$refs.reference when you reused the component, and the position of the popover cannot be calculated correctly.
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
I am using the following code to generate radio buttons in my template.
<template v-for="(property,index) in propertiesList">
<input type="radio" :value="index" v-model="picked2"
:checked="property.checked">{{property.address}}<br>
</template>
property.checked has value of checked for one of the rows, and is null for rest of rows. I want to show the corresponding row (with property.checked = 'checked') as checked when the page is rendered. However, all rows appear as unchecked. Could someone please advise how to fix the issue? Thanks.
#Bret has provided the answer in the comment (to my question).