I am trying to figure out how to compare user input value from a dropdown menu with an objects of IDs with the keys matching the dropdown's options in Vue.
Example:
<template>
<select v-model="selectMenu">
<option v-for"select in selections">{{ selection }}</option>
</select>
</template>
<script>
export default {
data() {
return {
selectMenu: '',
selections: [ 'one', 'two', 'three' ],
ids: {
one: 'dfs745jfdb',
two: 'adfjdsh3gf5',
three: 'ag23dsgnsj'
}
}
}
}
</script>
I figured out how to do this a much easier way. i'm very new to vue and coding in general. What I did was combine selections and id's into a single array like this:
Solution:
<template>
<select v-model="selectMenu">
<option v-for"selectId in selectIds" v-bing:value="selectId.id">
{{ selectId.text }}
</option>
</select>
</template>
<script>
export default {
data() {
return {
selectMenu: '',
selectIds: [
{ text: 'one', id: 'dfs745jfdb' },
{ text: 'two' id: 'adfjdsh3gf5' },
{ text" 'three' id: 'ag23dsgnsj' }
]
}
}
}
</script>
this.ids[this.selectMenu] should give you the object in ids object.
You could try
Object.keys(this.ids).forEach(x => ... /* do stuff with this.ids[x] */)
Related
I was creating a drop-down in v-select, after selecting a option when clicking on clear button I need to clear the drop down and change option array to initial stage.
How to check clear button (x) is clicked or not, I tried with on-change is used to get selected value it is working properly and #click etc. none of them working, please help me.
<template>
<v-select
v-model="selected"
:reduce="(option) => option.id"
:options="[
{ label: 'One', id: 1 },
{ label: 'Two', id: 2 },
]"
#onChange="searchProduct"
/>
</template>
<script>
export default {
data() {
return {
selected: 3,
}
},
methods(){
searchProduct(selected){
console.log('selected value ',selected)
}
}
</script>
I'm expecting something methods to handle drop-down clear event.
As we don't have any explicit event yet, we can achieve this requirement by watching the v-model value.
watch: {
selected(value) {
if (!value) {
// Your logic here
}
}
}
Live Demo as per the requirement :
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
selected: 3
},
watch: {
selected(value) {
if (!value) {
this.selected = 3;
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
<v-select
v-model="selected"
:reduce="(option) => option.id"
:options="[
{ label: 'One', id: 1 },
{ label: 'Two', id: 2 },
]"
/>
</div>
I have been working with simple dropdown, and I keep having this error returned https://prnt.sc/1xdusd2 (I solved the prop problem)
then I read a bit more on that specific problem and turns out this happens when vue instance cannot find your property.
But countries is there and it is within the instance. I can't understand where I went wrong.
So, the idea is to make the dropdown reactive to the countries data I am getting from api.
data exists only on the parent component and I am sending it as a prop to the child component where I am iterating and displaying within the ooption.
can someone help me what is wrong here specifically
drop down component (child component)
<template>
<div>
<select v-for="(country, ) in countries" :key="country">
<option >{{country.name}} </option>
</select>
</div>
</template>
<script>
export default {
name: "DropDown",
props:['countries'],
data() {
return {
selectedOption: null,
};
},
};
</script>
parent component ************
<template>
<div class="step1 flex flex-col">
<h1 class="self-start mb-5">Шаг 1.</h1>
<div class="flex justify-center ">
<h3 class="text-white font-medium text-xl">Выберите страну</h3>
<div class="mx-5" >
<DropDown :countries="countries" />
{{}}
</div>
</div>
</div>
</template>
<script>
//import Button from "./UI/Button.vue";
import DropDown from "./UI/DropDown.vue";
export default {
name: "Step1",
components: {
DropDown: DropDown,
//Button: Button,
},
data() {
return{
// countries: [
// {
// id: "RU",
// name: "Россия"
// },
// {
// id: "DE",
// name: "Германия"
// },
// {
// id: "EE",
// name: "Эстония"
// }
// ],
}
},
methods:{
async fetchCountry (){
const res = await fetch('api/countries')
let countries = await res.json();
return countries
}
},
created() {
}
};
Vue tries to load your country data before the api fetch has finished, to bypass this add an v-if="countries" in your <select v-for="(country, ) in countries" :key="country">, then vue will only try to load it if countries is not null
You need to have countries in your data in order for it to work in the template, try this in your parent:
import DropDown from "./UI/DropDown.vue";
export default {
name: "Step1",
components: {
DropDown,
},
data() {
return {
countries: [],
}
},
methods: {
async fetchCountry() {
const res = await fetch('api/countries')
this.countries = await res.json();
}
},
};
And this in your child
<template>
<select v-model="selectedOption">
<option
v-for="country in countries"
:key="country.name"
:value="country.name"
>
{{ country.name }}
</option>
</select>
</template>
<script>
export default {
name: "DropDown",
props: {
countries: {
type: Array,
default: () => [],
},
},
data() {
return {
selectedOption: null,
};
},
};
</script>
In my own component, i'm using SfComponentSelect (here in official docs)
When I click on option of select, selected option not show above the label "MySelect", this happen otherwise on sample inside the official docs.
This is my CustomComponent.vue
<template>
<SfComponentSelect label="MySelect">
<SfComponentSelectOption
v-for="option in optionsList"
:key="option.value"
:value="option.value"
class="sort-by__option"
>{{ option.label }}</SfComponentSelectOption>
</SfComponentSelect>
</template>
<script>
import { SfComponentSelect } from '#storefront-ui/vue';
export default {
name: "CustomComponent",
components: {
SfComponentSelect
},
data(){
return {
optionsList: [
{
value: "opt-1",
label: "Option 1",
},
{
value: "opt-2",
label: "Option 2",
}
]
}
}
};
</script>
After struggling on problem, i've found a solution for this problem.
Create new component (called: MyNewComponent) defining SfComponentSelect as mixins and copying from template and scss from SfComponentSelect.
Defining for MyNewComponent a new props and html for this
Using MyNewComponent as below
<SelectStore :label="name"
:size="pdvLists.length"
#change="changeLabel"
:my-new-label="myNewLabel"
persistent>
<SfComponentSelectOption
v-for="option in options"
:key="option.value"
:value="option.value"
class="sort-by__option"
>{{ option.name }}</SfComponentSelectOption>
</SelectStore>
<script>
import MyNewComponent from './MyNewComponent';
export default {
name: "ComponentBlaBla",
components: {
MyNewComponent
},
data() {
return {
options: [
{
value: "opt1",
name: "Opt1"
},
{
value: "opt2",
name: "Opt2"
}
],
myNewLabel: ''
}
},
methods: {
changeLabel(value){
// change something
let selectedOption = this.options.filter((item) => value === item.value);
this.myNewLabel = selectedOption[0].name;
}
}
};
</script>
I need to implement a button that would drop the filters in my application. The application is written on Vue. The filters themselves were implemented, but I do not know how to implement their reset.
<template>
<div id="app">
<input type="text" v-model="search">
<select name="sort" v-model="sort">
<option v-for="option in options" :value="option.value" :label="option.label"></option>
</select>
<table>...</table>
</div>
</template>
<script>
import goodsList from './api/data';
export default {
name: 'app',
data() {
return {
search: '',
sort: '',
options: [
{ label: 'Default', value: 'none' },
{ label: 'Brand', value: 'brand' },
{label: 'Price', value: 'price'}
],
goods: goodsList,
}
},
computed: {
filteredList() {
let filteredGoods = this.goods.filter( item => {
return item.name.toLowerCase().includes(this.search.toLowerCase());
});
switch (this.sort) {
case 'brand':
filteredGoods.sort((a, b) => a.brand.localeCompare(b.brand));
break;
case 'price':
filteredGoods.sort((a, b) => parseInt(a.price - b.price));
break;
}
return filteredGoods;
}
},
}
</script>
You will need a reset function which will assign the default selected value eg: 'none' to the v-model 'sort'. Since it is a two way binding, changing the value of 'sort' variable will eventually reset the selected option.
Function to be added:
resetOptions: function () {
this.sort='none';
}
Link below
https://jsfiddle.net/RohanPatil/68wced20/9/
How we select item props together in v-model
I mean i select something only take one value.
I want to select value it should be binding name and dept together
Because i will push the these values on table.
<select v-model="name">
<option v-for="member in members" :key="member.id" :label="member.name" :value="member.name">
</option>
</select>
data(){
return {
members: [{id: 1, name: 'alpkaan', dept: 'quality'}]
}
}
I found one way it's running
:value="{'id':member.id, 'name':member.name}"
But;
Select button not work correctly. Because of v-model="name"
How solved this situation idk. :(
In your select you must have a variable that will contain the selected value,
an event that will listen to each value change and with a method related to this event, you will be able to browse your object array to find the object with the selected value.
NOTE : I delete the id with delete this.memberSelectedData.id but you can leave it if you need it, here is a screenshot.
And there is the code:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<select v-model="memberSelected" #change="slectMember()">
<option v-for="member in members" :key="member.id" :label="member.name" :value="member.name"></option>
</select>
<p>Member name : {{memberSelected}}</p>
<p>Member data : {{memberSelectedData}}</p>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
members: [{ id: 1, name: "alpkaan", dept: "quality" }, { id: 2, name: "alpkaan2", dept: "quality2" }],
memberSelected: "",
memberSelectedData: {}
};
},
methods: {
slectMember() {
this.members.map( member => {
if(member.name === this.memberSelected){
this.memberSelectedData = member
delete this.memberSelectedData.id
}
})
}
}
};
</script>