I would like to make select input which will be able to search items in data source. According documentation to select it seems it is not possible to do it via select component. I tried to use autocomplete component instead of it, but it does not work.
The code with both examples is here. non of them works as expected (select with search with key as v-model value)
<b-autocomplete
v-model="company.country"
:data="selectCountries"
:field="value"
:keep-first="keepFirst"
placeholder="Select country"
:open-on-focus="openOnFocus"
<b-field label="Find a name">
#select="option => (selected = option)"
:clearable="clearable"
>
</b-autocomplete>
</b-field>
<b-select v-model="company.location" expanded>
<option v-for="option in selectCountries"
:value="option.key"
:key="option.key">
{{ option.value }}
</option>
</b-select>
</field>
...
data() {
return {
selectCountries: [
{"value": "slovakia", "key": "SK"}, {"value": "England", "key": "EN"}
],
}
}
In order for the autocomplete to work, you need to filter the list yourself and pass the results back to the component. To do this, we created a computed property like this:
<template>
<section>
<b-autocomplete v-model="country" :data="filteredCountries" field="name" :keep-first="true" placeholder="Select Country" :open-on-focus="true"></b-autocomplete>
</section>
</template>
<script type="text/javascript">
export default {
data: () => ({
country: '',
countries: [
{
name: 'Slovakia',
key: 'SK'
},
{
name: 'England',
key: 'EN'
},
{
name: 'United States of America',
key: 'USA'
}
]
}),
computed: {
filteredCountries () {
if (this.country !== null) {
return this.countries.filter((option) => {
return option.name.toString().toLowerCase().indexOf(this.country.toLowerCase()) >= 0
})
} else {
return this.countries
}
}
}
}
</script>
Related
How are you?
I'm studying Vue and I'm stuck on the current task not knowing where to go.
I have a select that when I click I need to show on screen only what corresponds to that selection. For example, when placing the "to do" option in the select, only the tasks with a concluded=false should appear on the screen. I've only gotten this far and I need help to continue. Can you help me? Thanks
This is my App.vue
<template>
<div id="app">
<h1>Lista de Tarefas</h1>
<List :data="list" #remove="handleRemove"/>
<Form #add="addNewTask" #onChange="handleN"/>
</div>
</template>
<script>
import List from "./components/List.vue";
import Form from "./components/Form.vue";
export default {
components: {
List,
Form,
},
data() {
return {
list: [],
};
},
methods: {
addNewTask(newTask) {
this.list.push(newTask);
},
handleRemove(item) {
const index = this.list.findIndex(i => i.id === item.id)
this.list[index].excluded = true
},
handleN(item) {
const index = this.list.findIndex(i => i.id === item.id)
this.list[index].concluded = true
}
},
};
</script>
This is my List.vue
<template>
<ul>
<select v-model="selected" #change="onChange($event)">
<option disabled value="">Escolha a visualização</option>
<option v-for="option in options" :key="option.text">
{{ option.text }}
</option>
</select>
<li v-for="item in itens" :key="item.id">
<input type="checkbox" id="checkbox" v-model="item.concluded" />
<label for="checkbox"> {{ item.description }} </label>
<button #click="() => $emit('remove', item)">Excluir</button>
</li>
</ul>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: () => {},
},
},
data() {
return {
selected: "",
options: [
{ text: "Todos", value: "1" },
{ text: "A fazer", value: "2" },
{ text: "Concluído", value: "3" },
{ text: "Deletado", value: "4" },
],
};
},
computed: {
itens() {
return this.data.filter((item) => item.excluded === false);
},
},
methods: {
onChange(event) {
console.log(event.target.value);
return this.data.filter((item) => item.concluded === false);
},
},
};
</script>
This is my Form.vue
<template>
<form #submit.prevent="handleNewTask">
<input type="text" v-model="newTask" placeholder="Insira a tarefa"/>
<input type="submit" value="Adicionar"/>
</form>
</template>
<script>
import Task from '../types/Task.js'
export default {
data() {
return {
newTask: "",
};
},
methods: {
handleNewTask() {
this.$emit('add', new Task(this.newTask))
this.newTask = ''
}
},
};
</script>
And this is my Task.js
export default class {
constructor(description) {
this.description = description,
this.id = Math.random(),
this.concluded = false,
this.excluded = false
}
}
I watch some tutorials, read the documentation and some StackOverflow questions but I really can't get out of here
Thanks in advance for the help
Based on how you have structured your app, our only concern should be with the List.vue file.
Your goal is to filter the results based on the selection (selected property). However, your issue is that you are not even using that anywhere.
I know you are hard coding the filter on the onChange method but that is, first of all wrong because you aren't really changing anything (you are returning an array), and secondly it's inefficient.
A better way to do it is to update the computed itens function like so:
itens() {
return this.data.filter((item) => {
if (this.selected === '1'){
return item.concluded === false
} else if (this.selected === '2'){
// filter another way
} else if (... // so on and so forth
});
},
Also, I would filter out the excluded items before sending them to the component. If you aren't going to use it, don't send it.
Remove the onChange event on the <select> and the associated method since they are now unused.
I am new to vuejs and I am making an app which should filters all the data from database and filter parameters should be passed in URL, so that it remain in the page even after page refresh.
Firstly, I want to push search params in URL
My current Url localhost:8080/product
I want my Url to be like below when user click checkboxes
localhost:8080/product?color=red&color=green&size=small (When user checks red, green and small options)
So far, I have done this and I am stuck how to get dynamic color in $this.router.push(), and append it to URL
<template>
<div class="products">
<h1>Filter By Color</h1>
<input #click="filterData" v-model="colortype" type="checkbox">Red color
<input #click="filterData" v-model="colortype" type="checkbox">Green color
<input #click="filterData" v-model="colortype" type="checkbox">Yellow color
<h1>Filter By Size</h1>
<input #click="filterData" v-model="size" type="radio">Big
<input #click="filterData" v-model="size" type="radio">Small
</div>
</template>
<script>
export default {
data() {
return {
colortype:''
}
},
methods:{
filterData() {
this.$router.push({ path: "product", query: { color: "red" } });
}
}
}
</script>
Any suggestions, once I push params to URL, I want to do api request to endpoint in filterData method.
There is a pattern you can use for this:
Store the filter values on an object
Deeply watch the filter object and react to it by fetching data / updating url.
The following snippets demonstrate a dropdown where you can pick one value to filter on.
<template>
<div>
Color:
<select v-model="filter.color">
<option v-for="item in colors" :key="item.value" :value="item.value">
{{ item.name }}
</option>
</select>
</div>
</template>
export default {
name: "MyComponent",
data: () => ({
filter: {
color: null,
},
colors: [{name: 'Black', value: 'black'}, {name: 'Red', value: 'red'}],
}),
watch: {
'filter': {
deep: true,
handler(filter) {
this.$router.replace({
...this.$route,
query: {
color: filter.color.value,
// TODO: Convert `filter` to params
},
});
this.search(filter);
},
},
},
};
For the case where there a field accepts multiple values (e.g. using checkboxes) I'd suggest to put all values on the filter object and have each option mark its checked-ness with a flag. The following snippets demonstrate that technique:
<template>
<div>
Sizes:
<label v-for="size in sizes" :key="size.value">
<input type="checkbox" v-model="size.active">
{{ size.name }}
</label>
</div>
</template>
export default {
data: () => ({
filter: {
sizes: [{name: 'Small', value: 'small', active: false}],
},
}),
watch: {
filter: {
deep: true,
handler() {
this.$router.replace({
...this.$route,
params: {
sizes: this.filter.sizes
.filter(size => size.active)
.map(size => size.value)
.join('+'),
},
});
},
},
},
}
I have a simple application that uses a v-for in a select statement that generates two select tags. The groupedSKUAttributes variable that creates the select statement looks like this:
groupedSKUAttributes = {colour: [{id: 1, name: 'colour', value: 'red'},
{id: 2, name: 'colour', value: 'blue'}],
size: [{id: 3, name: 'size', value: '40'},
{id: 4, name: 'size', value: '42'}]}
I also have a button that I want to clear the select fields. How do I get the clear method to make each of the select fields choose their default <option value='null' selected>select a {{ attributeName }}</option> value? I can't figure out if I'm meant to use a v-model here for the groupedSKUAttributes. Any advice would be appreciated.
The template looks like this:
<template>
<div>
<select
v-for='(attribute, attributeName) in groupedSKUAttributes'
:key='attribute'
#change='update(attributeName, $event.target.value)'>
<option value='null' selected>select a {{ attributeName }}</option>
<option
v-for='a in attribute'
:value='a.id'
:label='a.value'
:key='a.id'>
</option>
</select>
</div>
<button #click='clear'>clear</button>
</template>
And the JS script looks like this:
<script>
export default {
name: 'app',
data() {
return {
groupedSKUAttributes: null,
}
},
methods: {
clear() {
console.log('clear');
},
update(attributeName, attributeValue) {
console.log(attributeName, attributeValue);
},
getSKUAttributes() {
API
.get('/sku_attribute/get')
.then((res) => {
this.skuAttributes = res.data;
this.groupedSKUAttributes = this.groupBy(this.skuAttributes, 'name');
})
.catch((error) => {
console.error(error);
});
},
},
created() {
this.getSKUAttributes();
}
}
</script>
The v-model directive works within the v-for without any issues.
<script>
export default {
name: 'app',
data() {
return {
groupedSKUAttributes: null,
selected: {}
}
},
methods: {
clear() {
this.generateDefaultSelected(this.generateDefaultSelected);
},
update(attributeName, attributeValue) {
this.selected[attributeName] = attributeValue;
},
getSKUAttributes() {
API
.get('/sku_attribute/get')
.then((res) => {
this.skuAttributes = res.data;
this.groupedSKUAttributes = this.groupBy(this.skuAttributes, 'name');
// Call this method to reset v-model
this.generateDefaultSelected(this.groupedSKUAttributes);
})
.catch((error) => {
console.error(error);
});
},
generateDefaultSelected(groupedSKUAttributes) {
// Reset the object that maintains the v-model reference;
this.selected = {};
Object.keys(groupedSKUAttributes).forEach((name) => {
// Or, set it to the default value, you need to select
this.selected[name] = '';
});
}
},
created() {
this.getSKUAttributes();
}
}
</script>
In the above code, generateDefaultSelected method resets the selected object that maintains the v-model for all your selects.
In the template, you can use v-model or unidirectional value/#change pair:
<!-- Using v-model -->
<select
v-for='(attribute, attributeName) in groupedSKUAttributes'
:key='attributeName' v-model="selected[attributeName]">
<!-- Unidirection flow without v-model -->
<select
v-for='(attribute, attributeName) in groupedSKUAttributes'
:key='attributeName' :value="selected[attributeName]"
#change='update(attributeName, $event.target.value)'>
I have an array "option" with some element inside. And have vue-select feature. I want to not to show selected option in all options list.
So, I want to delete "RU" option form that list if "RU" is selected. Are there any decisions?
My component file:
v-select:
<v-select :options="options" label="title" class="select" v-model="selectedLang">
<template slot="option" slot-scope="option">
<img class="language-flag" :src="option.img" /> {{ option.title }}
</template>
<template slot="selected-option" slot-scope="option">
<img class="language-flag" :src="option.img" /> {{ option.title }}
</template>
</v-select>
script part:
export default {
data() {
return {
options: [{
title: 'RU',
img: require('../../assets/icons/flags/RU.svg'),
},
{
title: 'KZ',
img: require('../../assets/icons/flags/KZ.svg')
},
],
selectedLang: null,
}
},
mounted() {
this.selectedLang = this.options[0];
}
}
You can use computed:
computed: {
items () {
return this.options.filter(i => i.title !== this.selectedLang?.title)
}
}
and then use these "items" as options in select
<v-select :options="items" label="title" class="select" v-
model="selectedLang">
If you're looking multi-select, you can use the following,
<v-select multiple :options="getOptions" ... />
{{ selectedLang }} // Prints selected options
{
data: {
selectedLang: [],
options: [
{ title: 'RU', img: require(...) },
{ title: 'KZ', img: require(...) }
]
},
computed: {
getOptions() {
return this.options.filter(option => !this.selectedLang.find(o => o.title === option.title))
}
}
}
Here is my vue page on Nuxt js:
<template>
<div>
<select
id="category"
name="category"
v-model="selected">
<option value="0">categories</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<services-list :list="services.list" />
</div>
<template>
export default {
components: {
ServicesList
},
data() {
return {
services: {
list: [
{
name: 'NAME1',
title: 'TITLE1',
category: '1'
},
{
name: 'NAME2',
title: 'TITLE2',
category: '2'
},
}
}
}
I need to filter rendered data based on a selected category from <select>.
I tried changing the state on change of <select> but it works only first time. because the data in state would change and running it the second time will not give the correct result.
To get the filtered list from selected, use a computed
computed{
filtered(){
if (this.selected === null) return this.services.list
return this.services.list.filter(s => s.category === this.selected)
}
}
Then you can use filtered in your template
computed: {
filtered() {
if (this.selected === null) return this.services.list
return this.services.list.filter(obj => obj.category === this.selected)
}
}