Hello I am making a multi-select in Vue and my problem is I don't get the exact data from the selected items
Here is my code
<multiselect v-model="itemValue"
:show-labels="false"
:options="itemObj"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:hide-selected="true"
:preserve-search="true"
label="itemName" track-by="itemName"
:preselect-first="true"
placeholder="List of Items"
#select="selectItem($event)">
<template slot="selection" slot-scope="itemValue"></template>
</multiselect>
<!---- TO SHOW THE CURRENT SELECTED ITEM ID --->
<pre>{{itemValue.map(a => a.id)}}</pre>
when I try to select an Item in the selection, right in the <pre> I'm able to see the selected Item ID but when I try to console.log(itemValue) it will not show anything but if I will select another item, there must 2 selected items now which is being shown in <pre> but in my console.log(itemValue) it will just show the first selected Item.
Does anyone know how can I get the exact selected items so I can able to search using this kind of filter because basically, I will use this as a search filter.
THANK YOU!
see this codesandbox for a working sample: https://codesandbox.io/s/1yml74p9xj
there were some issue's in your code, but you can see the sample how to get it working. 3 files to look at:
App.vue (were the multi select is added to vue globally)
index.html (import of css for style)
HelloWorld.vue (for the code)
in my sample, the selectedItems contains the items that were selected/unselected from the vue multi select
Related
the question I have might be hard to understand, so please help me re-organize the question if you can see the better way to put it in.
So, I am building a registration platform.
(1) First, I receive an array of objects of cases the user can sign time to.
(2) Each object consists of 2 properties, "name", "description".
(3) I store the array in the data, end use it in the element provided by a picker called "vue-multiselect", which basically accepts the array and loops over the objects and displays them.
(4) As you can see, it displays both properties and values, which I am trying to avoid. My question is, is it possible to pass only the "name" value into the picker, and display the description value when hovering the first value?
You can find this use case documentation here: https://vue-multiselect.js.org/#sub-custom-option-template
<multiselect v-model="value"
deselect-label=""
select-label=""
placeholder=""
selected-label=""
:show-pointer="true"
:options="projectCases">
<template slot="option" slot-scope="{ option }">
<strong :title="option.description">{{ option.name }}</strong>
</template>
</multiselect>
ps: I use title attribute to implement display-on-hover functionality. you can use any other tooltip library as well.
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
I am using el-select from Element-UI with multiple, filterable and remote search.
I have an array of objects as v-model to the element, which has some values already present. On loading the page, the tags do not have any text in them and are not displayed in the select box. I have added value-key which does show the present elements as checked in the dropdown.
Not sure whats going wrong, code link:
jsfiddle
<el-select
v-model="value9"
multiple
value-key="state"
filterable=""
remote=""
reserve-keyword
placeholder="Please enter a keyword"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options4"
:key="item.state"
:label="`${item.state} (${item.state})`"
:value="item">
</el-option>
That is because options4 is empty array.
You must specify array contents including options you want to display in the el-select component.
If you use state instead, it should work.
<el-option
v-for="item in state"
:key="item.state"
:label="`${item.state} (${item.state})`"
:value="item">
</el-option>
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).
Currently, when I have a v-for loop like this:
<li v-for="record in records">
<my-vue-list-item :vue-title="record.title"></my-vue-list-item>
</li>
and I update the data driving the v-for (i.e. assign a new value to records), it doesn't actually create new list items based on the new data. It just updates some of the properties on the list item components components.
Here is a JSFiddle illustrating what I'm talking about. Try expanding one of the buttons (e.g. click "Expand Apple"), then click on "Set 2" to see that even when the list items switch, the component stays expanded.
What's the recommended way of getting around this behavior? I want each new list item (when the data is swapped out) to appear like new. (In the fiddle example, which I load a new set, it should not be already expanded.)
You need to let the Vue components know that the item is different. As far as they know, they're still rendering the same element index from the same list.
You can do this by specifying the key in your v-for iterator...
<li v-for="item in items" :key="item">
https://jsfiddle.net/ahxf44jk/21/