Filter object with arrays Vue.js?

There are 2 select, the first value that come with the API
{
 "menu": {
 "3": [
[
{
 "id": 1,
 "dish_id": 1,
 "time_id": 1,
 "slot_id": 0,
 "title_ru": "pea Soup"
},
{
 "id": 2,
 "dish_id": 2,
 "time_id": 1,
 "slot_id": 0,
 "title_ru": "Soup"
}
]
]
}
}

<div class="form-group">
 <select v-on:change="signalChange" v-model="menu.selectedmenu[1][3][0]['dish_id']" class="form-control obed" ref="obed" id="o1">
<option></option>
 <option v for="dish in the menu.dishes[3][0]" :value="dish.id" v-bind:key="dish.id">{{dish.title_ru}}</option>
</select>
</div>
 <div class="form-group">
 <select v-if="menu.dishesp.first" v-on:change="signalChange" class="form-control personal" ref="p1" id="p1">
 <option ></option>
 <option v for="dish in the menu.dishesp.first[0]" :value="dish.id" v-bind:key="dish.id">{{dish.title_ru}}</option>
</select>
 </div>

after selecting the values in the first select it the options are inserted in second select

Please tell me how in the second to put the select(filter) only the array that was chosen in the 1st select , now all the options are inserted.

import Datepicker from 'vuejs-datepicker';
const axios = require('axios').default;

export default {

data(){
 return {
menu:{

dish:",
dishesp:",
 dishes: ",
 selectedmenu: ",
},

}

},
methods:{
 signalChange: function(){
 // console.log(event.target.dishes)
 // console.log(event.target.value)
 let className=event.target.className;
 if(className=='form-control obed')
{

//this.menu.dishesp=Array(61);
 // console.log(this.menu.dishes[6][0])
console.log(this.menu.dishesp)
console.log(this.menu.dishes)
 /* let arr=[1,2];
arr.push(3)*/


this.menu.dishesp={}
this.menu.dishesp.first = {}; 
this.menu.dishesp.first = []; 
this.menu.dishesp.first.push(this.menu.dishes[3][0])

console.log(this.menu.dishesp.first[0][1])





}
 /*if(this.$refs.obed.id=='form-control obed1')
{
//this.$refs.personal.innerHTML
}*/
axios
.post('http://localhost:8000/savemenu',{'dish_id', event.target.value})
 .then(response => (
response

))
 .catch(function (error) {
error.data;
self.$router.push('/');

});
},
searchDate:function(date){
 let self = this;
 var day = date.getDate();
 var month = date.getMonth();
 var by month2=Number(month)+1;
 var year = date.getFullYear();
 let date2=year+'-'+by month2+'-'+day;
axios
.post('http://localhost:8000/foodmenulist',{'date':date2})
 .then(response => (this.menu.dishes = response['data']['menu'],this.menu.selectedmenu=response['data']['selected']))
 .catch(function (error) {
console.log ("error".data);
self.$router.push('/');

});
}
},
 mounted() {
 let self = this;
axios
.post('http://localhost:8000/foodmenulist')
 .then(response => (this.menu.dishes = response['data']['menu'],this.menu.selectedmenu=response['data']['selected']),

)
 .catch(function (error) {
console.log ("error".data);
self.$router.push('/');

});
},
 components: {
Datepicker
}


}
April 7th 20 at 15:38
1 answer
April 7th 20 at 15:40
Solution
in the first select in the model is key the menu number ("3", for example), start computed property that returns this.menu[V-a model of the first selekt], this computed substitute in the second select
https://codesandbox.io/s/admiring-haslett-s6oci
Excuse me if I write here what are you doing in computed? - Jaycee.Borer commented on April 7th 20 at 15:43
@Simone_Sauernot understand your question - Jermain.Man commented on April 7th 20 at 15:46

Find more questions by tags Vue.js