We Keep Coding

How to change the two switch data with click with Vuejs

Please can someone teach me the method to swap two different data on click
For example, we have a data
data() {
return {
data_one: [
{
name: "Simo",
age: "32"
}
],
data_two: [
{
name: "Lisa",
age: "25"
}
],
}
},
then I want to put this data on v-for, and I want to add two buttons to swap from data_one and data_two and display data_one as default.
<button #click="change_to_data_one">Data 1<button>
<button #click="change_to_data_two">Data 2<button>
<li v-for="item in data_one">{{item.name}} - {{item.age}}<li>
🙏🙏🙏🙏🙏

Try to use computed property:
new Vue({
el: "#demo",
data() {
return {
data_one: [{name: "Simo", age: "32"}],
data_two: [{name: "Lisa", age: "25"}],
selected: "data_one"
}
},
computed: {
showData(){
return this[this.selected]
}
},
methods: {
swap(val) {
this.selected = val
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button #click="swap('data_one')">Data 1</button>
<button #click="swap('data_two')">Data 2</button>
<ul>
<li v-for="(item, i) in showData" :key="i">{{item.name}} - {{item.age}}</li>
</ul>
</div>

Vue filter state array

My component state has an array named concessions with 35 objects, here's the structure of one of those objects:
{
address:"Some street"
brands: [{
id: 1,
name: 'fiat'
}]
city:"Paris"
contact_name:""
email:""
id:1
latitude:"11.11111"
longitude:"22.22222"
name:"AGORA Cars"
opening_hours:"something"
phone:"969396973"
phone2:""
zipcode:"19100"
}
Now, I have a list rendered with all car brands and a checkbox for each one like this:
<div class="brands-filter col-10">
<span v-for="brand in brands" :key="brand.key" class="brand-card">
<div>
<input
type="checkbox"
:value="brand.name"
v-model="search_filters"
#click="filterConcessions()"
/>
<label class="form-check-label">{{brand.name}}</label>
</div>
</span>
</div>
Basically, for each clicked checkbox, I'm adding the brand to searched_filters and after that I want to filter the concessions array based on those filters.
In that click method, #click="filterConcessions()", I'm doing this:
filterConcessions: function () {
let concessions = this.concessions;
let search_filters = this.search_filters;
let filteredConcessions = [];
filteredConcessions = concessions.filter((concession) =>
concession.brands.some((brand) => search_filters.includes(brand.name))
);
this.concessions = filteredConcessions;
}
But, no matter what, it gives me an empty array.
Any advice?

It's because you need to use the #change event instead of #click.
Otherwise, search_filters isn't populated before filterConcessions is run:
new Vue({
el: "#app",
data: {
search_filters: [],
concessions: [{
address: "Some street",
brands: [{
id: 1,
name: 'fiat'
}],
city: "Paris",
contact_name: "",
email: "",
id: 1,
latitude: "11.11111",
longitude: "22.22222",
name: "AGORA Cars",
opening_hours: "something",
phone: "969396973",
phone2: "",
zipcode: "19100"
}]
},
methods: {
filterConcessions: function() {
let concessions = this.concessions;
let search_filters = this.search_filters;
let filteredConcessions = concessions.filter((concession) =>
concession.brands.some((brand) => search_filters.includes(brand.name))
);
console.log(filteredConcessions)
this.concessions = filteredConcessions;
}
}
});
Vue.config.productionTip = false;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="brands-filter col-10" v-if="concessions[0]">
<span v-for="brand in concessions[0].brands" :key="brand.key" class="brand-card">
<div>
<input type="checkbox" :value="brand.name" v-model="search_filters" #change="filterConcessions()" />
<label class="form-check-label">{{brand.name}}</label>
</div>
</span>
</div>
</div>

After some search i figure how to solve this.
I've created a computed method:
computed: {
filteredConcessions() {
if (!this.search_filters.length) {
return this.concessions;
} else {
return this.concessions.filter((concession) =>
concession.brands.some((brand) =>
this.search_filters.includes(brand.name)
)
);
}
},
}
and at the for loop i iterate throw the "filteredConcessions":
<li v-for="concession in filteredConcessions" :key="concession.id" class="p-2">
And that solved my case!

Polymer1 1.x Behaviour Not Found

I've been learning Polymer since 3 days ago and I'm stucked with Polymer Behaviours.
I've defined a Behaviour as you can see in the following code:
<script>
BSM._TestBehaviour = {
properties: {
language: {
value: document.documentElement.lang
},
/*GetCountries: {
type: Function,
computed: '_computeCountries'
},*/
fcountries: function () {
return function(){
return ['Catalunya','Andorra'];
}.bind(this);
}
}
};
BSM.TestBehaviour = [BSM._TestBehaviour];
</script>
And in the following snippet it can be seen a component that uses that behaviour:
<link rel="import" href="test-behaviour.html">
<dom-module id="test-apps">
<style>
</style>
<template>
<div id="container">
<paper-input value="{{_defaultUser.FirstName}}"></paper-input>
<paper-input value="{{_defaultUser.LastName}}"></paper-input>
<div></div>
<paper-dropdown-menu class="p50" label="Countries" >
<paper-listbox class="dropdown-content" id="countries">
<template is="dom-repeat" items="{{fcountries()}}">
<paper-item name="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<div></div>
</div>
<iron-data-table id="idt" items="{{GetCountries}}" selection-enabled multi-selection>
<data-table-column name="Id" >
<template> {{item.Id}}</template>
</data-table-column>
<data-table-column name="FirstName" >
<template> {{item.FirstName}}</template>
</data-table-column>
<data-table-column name="LastName" >
<template> {{item.LastName}}</template>
</data-table-column>
<data-table-column name="FullName" >
<template> [[_computeFullName(item)]]</template>
</data-table-column>
<data-table-column name="Country" >
<template> [[item.Country]]</template>
</data-table-column>
</iron-data-table>
</template>
<script>
BSM.TestApps = Polymer({
is: 'test-apps',
behaviours: [BSM.TestBehaviour],
properties: {
items: {
type: Array,
value: function () { return []; }
},
_defaultUser: {
type: Object
},
defaultSelected: {
type: Object
},
selectedIdCountry: {
type: Number
},
_newItemlabel: {
type: String
},
_itemsselected:{
type: Array,
value: function () {return [];}
},
countries:{
type: Array,
notify: true,
//value: function() {return ["Alemanya", "Dinamarca", "Canada"];}
//value: MyBehaviors.TestBehaviour.GetCountries
}
},
ready: function () {
var countries = this.behaviours[0].properties.GetCountries;
var users = [
{Id:1, FirstName: "Aleix", LastName: "Trasserra", Country: "EEUU"},
{Id:2, FirstName: "Maria", LastName: "Garcia", Country: "EEUU"},
{Id:3, FirstName: "Anna", LastName: "Tous", Country: "EEUU"},
{Id:4, FirstName: "Manel", LastName: "Rodriguez", Country: "EEUU"},
];
this.items = users;
var defaultUser = {
Id: null,
FirstName:"",
LastName: "",
Country:null
};
this._defaultUser = defaultUser;
this.$.idt.addEventListener('selecting-item',this._selectedItem.bind(this));
},
_selectedItem: function (e) {
this.set('_itemsselected', this.$.idt.selectedItems);
},
_onAddItem: function () {
//this.push('items',{Id: 4, text: this._newItemlabel});
//this.set('_newItemlabel',"");
},
_onRemoveSeletedItems: function () {
this._itemsselected.forEach(e => {
var index = this.items.indexOf(e);
this.splice('items',index,1);
})
},
_computeFullName: function (item) {
return item.FirstName + " " + item.LastName;
}
})
</script>
</dom-module>
The problem is that the component does not found the function "fcountries" defined in the behaviour.
Anyone can help me with this issue?
Thanks a lot!

Behavior:
/* #polymerBehavior BSM.TestBehaviourImp */
BSM.TestBehaviourImp = {
// implementation here
};
/* #polymerBehavior BSM.TestBehaviour */
BSM.TestBehaviour = [
BSM.TestBehaviourImp
// , other included base behaviors
];
Element:
...
<iron-data-table id="idt" items="{{items}}" selection-enabled multi-selection>
...
The table lists the users, which are stored in property items.
It looks like you want do do something with countries (like showing a filtered table of users)?
In that case, bind the selected item of <paper-dropdown-menu> to a property, i.e. selectedCountry: {type: String}.
Add a function which returns an Array of users, filtered to the selected country:
usersInSelectedCountry(): {
return this.items.filter(user => user.Country === this.selectedCountry || this.selectedCountry == null);
}
and use that function's return value as the data set for the table.

Filter list with Vue.js

I just got started with Vue.js and here is what I'm doing: I am rendering a list of products, and each product has a name, a gender and a size. I'd like users to be able to filter products by gender, by using an input to type the gender.
var vm = new Vue({
el: '#product_index',
data: {
gender: "",
products: [{name: "jean1", gender: "women", size: "S"}, {name: "jean2", gender: "men", size: "S"}]
},
methods:{
updateGender: function(event){
this.gender = $(event.target).val()
}
}
}
)
<div v-for="product in products" v-if="...">
<p>{{product.name}}<p>
</div>
<input v-on:change="updateGender">
I managed to get the gender updated, but I have an issue with the filtering part. When the page loads, I don't want any filtering. In the documentation, they advise to use v-if but it doesn't seem compatible with this configuration.
If I use v-if, I could do:
v-if="product.gender == gender"
But again, this doesn't work when the page load because gender is empty.
I couldn't find a workaround for this.
How should I approach this issue ?

Use computed properties - something like this (Example bellow filter items by type)
const app = new Vue({
el: '#app',
data: {
search: '',
items: [
{name: 'Stackoverflow', type: 'development'},
{name: 'Game of Thrones', type: 'serie'},
{name: 'Jon Snow', type: 'actor'}
]
},
computed: {
filteredItems() {
return this.items.filter(item => {
return item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1
})
}
}
})
Template:
<div id="app">
<div v-for="item in filteredItems" >
<p>{{item.name}}</p>
</div>
<input type="text" v-model="search">
</div>
Demo: http://jsbin.com/dezokiwowu/edit?html,js,console,output

You can try v-if="!gender || product.gender == gender"

Just modified #Nora's answer.
You need to change in the template as:
<div id="product_index">
<div v-for="product in products" v-if="!gender || product.gender===gender">
<p>{{product.name}}<p>
</div>
<input v-on:change="updateGender">
</div>
and in JS file as:
var vm = new Vue({
el: '#product_index',
data: {
gender: "",
products: [{name: "jean1", gender: "women", size: "S"}, {name: "jean2", gender: "men", size: "S"}]
},
methods:{
updateGender: function(event){
this.gender = event.target.value
}
}
}
);
Working Demo: https://jsbin.com/qocuraquki/edit?html,js,console,output

computed: {
filteredItems() {
return this.allStartupData.filter(item => {
let byName =
item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
let byDescription =
item.description.toLowerCase().indexOf(this.search.toLowerCase()) >
-1;
if (byName === true) {
return byName;
} else if (byDescription === true) {
return byDescription;
}
});
}
}
and then u can iterate through filteredItems like e.g
<v-flex v-for="(obj,index) in filteredItems" :key="index" xs12 md4>

computed: {
filteredItems() {
return myObject.filter((val) => {
return val.some((val) => val.toString().toLowerCase().includes(this.searchString))
})
}}
Iterate over the Object as already described above

Vue JS use array to filterBy another array?

Yep, it's me again. I'm trying to filter an array based on an array of strings. So while a single string filter is easy with Vue...
<div v-for="item in items | filterBy 'words' in 'property'">
...multiple search strings becomes more complex. There's been several questions about how to do this on StackOverflow already, but very few answers. Currently I'm trying to repurpose the custom filter found here for my needs, but it's not working.
My use case:
I have an array of groups (checkboxes) that the user can select to filter an array of people. Each person is assigned to one or more groups so if any one of their groups is selected by the user, that person should show up.
So my templates look like this:
<template v-for="group in ensemble_groups">
<input name="select_group[]" id="group_#{{ $index }}"
:value="group"
v-model="selected_groups"
type="checkbox">
<label for="group_#{{ $index }}">#{{ group }}</label>
</template>
<template v-for="person in cast | filterBy selectGroups">
<div>#{{ person.actor_name }}</div>
</template>
You see my custom filter selectGroups there? Here's my Vue arrays:
selected_groups: [],
ensemble_groups: ["Leads","Understudies","Children","Ensemble"],
cast: [
{
actor_name: "Dave",
groups: ["Leads"],
},
{
actor_name: "Jill",
groups: ["Leads"],
},
{
actor_name: "Sam",
groups: ["Children","Ensemble"],
},
{
actor_name: "Austin",
groups: ["Understudies","Ensemble"],
},
],
And finally here's the custom filter. I can't tell if it's even being triggered or not, because when I click on a group checkbox, nothing happens.
filters: {
selectGroups: function() {
if (!selected_groups || selected_groups.length === 0) {
return cast;
}
return this.recursiveFilter(cast, selected_groups, 0);
}
},
methods: {
recursiveFilter: function(cast, selected_groups, currentPosition) {
if (currentPosition+1 > selected_groups.length)
return cast;
var new_cast;
new_cast = cast.filter(function(person) {
for (group of person.groups) {
if (group.value == selected_groups[currentPosition])
return true;
}
});
return this.recursiveFilter(new_cast, selected_groups, currentPosition+1);
}
}
So if the user selects Leads only Dave and Jill should appear. If the user then checks Children, Dave, Jill, and Sam should appear. I'm so close!

I would use a computed property instead of a filter and a method.
I'd go through each cast member and if any of their groups is in selected_groups I'd allow it through the filter. I'd so this using Array.some.
results: function() {
var self = this
return self.cast.filter(function(person) {
return person.groups.some(function(group) {
return self.selected_groups.indexOf(group) !== 1
})
})
},
Here's a quick demo I set up, might be useful: http://jsfiddle.net/crswll/df4Lnuw6/8/

Since filters are deprecated (in v-for, see Bill's comment), you should get into the habit of making computeds to do filtery things.
(If you're on IE, you can't use includes without a polyfill; you can use indexOf...>=0 instead.)
new Vue({
el: '#app',
data: {
selected_groups: [],
ensemble_groups: ["Leads", "Understudies", "Children", "Ensemble"],
cast: [{
actor_name: "Dave",
groups: ["Leads"],
}, {
actor_name: "Jill",
groups: ["Leads"],
}, {
actor_name: "Sam",
groups: ["Children", "Ensemble"],
}, {
actor_name: "Austin",
groups: ["Understudies", "Ensemble"],
}, ]
},
computed: {
filteredCast: function() {
const result = [];
for (const c of this.cast) {
if (this.anyMatch(c.groups, this.selected_groups)) {
result.push(c);
}
}
return result;
}
},
methods: {
anyMatch: function(g1, g2) {
for (const g of g1) {
if (g2.includes(g)) {
return true;
}
}
return false;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div id="app">
<template v-for="group in ensemble_groups">
<input name="select_group[]" id="group_#{{ $index }}" :value="group" v-model="selected_groups" type="checkbox">
<label for="group_#{{ $index }}">#{{ group }}</label>
</template>
<template v-for="person in filteredCast">
<div>#{{ person.actor_name }}</div>
</template>
</div>

var demo = new Vue({
el: '#demo',
data: {
search: 're',
people: [
{name: 'Koos', age: 30, eyes:'red'},
{name: 'Gert', age: 20, eyes:'blue'},
{name: 'Pieter', age: 12, eyes:'green'},
{name: 'Dawid', age: 67, eyes:'dark green'},
{name: 'Johan', age: 15, eyes:'purple'},
{name: 'Hans', age: 12, eyes:'pink'}
]
},
methods: {
customFilter: function(person) {
return person.name.indexOf(this.search) != -1
|| person.eyes.indexOf(this.search) != -1
;
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="demo">
<input type="text" class="form-control" v-model="search"/>
<br/>
<table class="table">
<thead>
<tr>
<th>name</th>
<th>eyes</th>
<th>age</th>
</tr>
</thead>
<tr v-for="person in people | filterBy customFilter">
<td>{{ person.name }}</td>
<td>{{ person.eyes }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
</div>