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/
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>
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 wasn't able to find an answer for this use case of v-data-table.I know that you can use template and slots to modify a certain column but what if i want my value to be reflected only in one row? So in my code, everytime a user right clicks on the name column it adds a logo to show the value is copied and then after 3 seconds it removes it from the name -kind of like a toggle effect.
It works well whenever i click on a name on a certain row, and it copies the link value for that specific link by using vue-clipboard's library. However, it also does the same thing for all the other columns that have link. I would like to do it for only one. I couldn't make the vue-clipboard library run in sandbox so i'm sharing my code snippets.
In order to better show the current behavior, this is a screenshot from the v-data-table. (as you can see, it shows the check icon in both rows even though i only click on the first one. The expected behavior would only show the check icon the cell that has been clicked on .
template;
<template>
<v-data-table
:headers="headers"
:items="tableData"
class="display-stats"
:items-per-page="5"
:footer-props="{
'items-per-page-options': rowsPerPageItems,
}"
>
<template v-slot:[`item.name`]="{ item }">
<span v-if="item.link" class="link-span" #contextmenu="copyLink(item.link)">
<a class="preview-link" :href="item.preview" target="_blank">{{ item.name }}</a>
<p v-show="copied">
<v-icon small :color="green">fas fa-check</v-icon>
</p>
</span>
<span v-else>
{{ item.name }}
</span>
</template>
</v-data-table>
</template>
script;
<script lang="ts">
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)
interface PriceStats {
rowsPerPageItems: Number[]
copied: boolean
}
export default Vue.extend({
name: 'Component',
props: {
priceData: {
type: Array as () => Array<PriceStats>,
default: () => {},
},
loading: {
type: Boolean,
default: false,
},
},
data(): PriceData {
return {
rowsPerPageItems: [10, 20, 30],
copied: false,
}
},
computed: {
tableData:{
get():PriceStats[]{
if (this.priceData) {
return this.priceData
} else {
return []
}
},
set(newVal:PriceStats){
this.tableData=newVal
}
},
headers(): DataTableHeader[] {
return [
{
text: 'Name',
value: 'name',
},
{
text: 'Age',
value: 'age',
align: 'center',
},
{
text: 'Salary',
value: 'salary',
},
{
text: 'Position',
value: 'format',
},
{
text: 'Date',
value: 'date',
},
{
text: 'Premium',
value: 'premium',
align: 'right',
},
]
},
},
methods: {
copyLink(previewLink: string) {
this.$copyText(previewLink).then(
(e) => {
this.copied = true
setTimeout(()=> {
this.copied = false
},3000)
},
(e) => {
need an error logic here
this.copied = false
}
)
},
},
})
</script>
Let's assume that users cannot have the same name, you can check if the name is equal to the one on the row copied then display the icon there.
like this:
<v-data-table ...>
<span v-if="item.link" class="link-span" #contextmenu="copyLink(item.link,item.name)">
<a class="preview-link" :href="item.preview" target="_blank">{{ item.name }}</a>
<p v-show="item.name == copiedName">
<v-icon small :color="green">fas fa-check</v-icon>
</p>
</span>
</v-data-table>
copiedName can be an external variable that you assign the name of the user using the function copyLink
...
copyLink(previewLink: string,name) {
this.$copyText(previewLink).then(
(e) => {
this.copied = true
this.copiedName = name
setTimeout(()=> {
this.copied = false
},3000)
},
(e) => {
need an error logic here
this.copied = false
}
)
},
I want to pass the default value of vue multiselect component use props, but I can't do this.
I use two selectors. When one option in select-1 selects I want the default value in select-2 is option select
No error just doesn't work properly. The value selected from the first selection does not fall into the default value of the second selection
multiselect component
<template>
<div>
<multiselect v-model="internalValue" id="currency_id" #input="onchange" placeholder="Select Your Currency" label="title" track-by="title" :options="options" :option-height="10" :show-labels="false">
<template slot="singleLabel" slot-scope="props"><img class="option__image" :src="props.option.img"><span class="option__desc"><span class="option__title">{{ props.option.title }}</span></span>
</template>
<template slot="option" slot-scope="props"><img class="option__image" :src="props.option.img">
<div class="option__desc"><span class="option__title" :id="props.option.id">{{
props.option.title }}</span><span class="option__small">{{ props.option.desc }}</span></div>
</template>
</multiselect>
</div>
</template>
import Vue from 'vue';
import Multiselect from 'vue-multiselect'
Vue.component('multiselect', Multiselect);
export default {
props: ['options', 'value'],
components: {
Multiselect
},
data() {
return {
internalValue: this.value,
}
},
methods: {
onchange(options) {
this.$emit('selectvalue', options.id);
}
},
watch: {
internalValue(v) {
this.$emit('input', v);
}
}
}
HTML
**select 1**
<multiselect #selectvalue="apiCalc":options="[
{
id: '1', title: 'Tether', img: 'https://coinnik.com/uploads/crypto-logos/006fe133d48ea7cd45cf8ccb8cb7ec42.png'
}
,
{
id: '2', title: 'ether', img: 'https://coinnik.com/uploads/crypto-logos/006fe133d48ea7cd45cf8ccb8cb7ec42.png'
}
,
{
id: '3', title: 'bitcoin', img: 'https://coinnik.com/uploads/crypto-logos/006fe133d48ea7cd45cf8ccb8cb7ec42.png'
}
]"
> </multiselect>
select2
<multiselect id="receive-currency" :options="receive_currency" v- model="selectedValue"></multiselect>
app.js
new Vue({
el: "#calculate",
data: {
receive_currency: [],
selectedValue: null,
},
methods: {
apiCalc(options) {
let self = this;
this.sendCurrencyId = options;
var receiveCurrency = [];
for (let item in responseData.data.direction.data) {
receiveCurrency.push({
title: responseData.data.direction.data[item].receiveCurrency.data.title,
img: '',
});
}
self.receive_currency = receiveCurrency;
self.selectedValue = receiveCurrency[0]
})
}
}
},
components: {
'multiselect': Multiselect
},
created() {
this.apiCalc();
},
});
In template:
<multiselect v-model="multiSelect1" :options="options" #input="onChange"></multiselect>
<multiselect v-model="multiSelect2" :options="options" :placeholder="placeholder"></multiselect>
In script:
data: () => ({
multiSelect1: "",
multiSelect2: "",
options: ["list", "of", "options"],
placeholder: "Select option"
}),
methods: {
onChange() {
this.multiSelect2 = this.multiSelect1
}
}
Please check this codesandbox: https://codesandbox.io/s/vue-template-t226h
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] */)