Есть 2 селекта, в первом значение которые приходят с API
{
"menu": {
"3": [
[
{
"id": 1,
"dish_id": 1,
"time_id": 1,
"slot_id": 0,
"title_ru": "Суп гороховый"
},
{
"id": 2,
"dish_id": 2,
"time_id": 1,
"slot_id": 0,
"title_ru": "Борщ"
}
]
]
}
}
<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 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 menu.dishesp.first[0]" :value="dish.id" v-bind:key="dish.id">{{dish.title_ru}}</option>
</select>
</div>
после выбора значения в первом селекте его options вставляются во второй селект
Подскажите пожалуйста как во второй селект закинуть(отфильтровать) только тот массив который был выбран в 1 селекте , сейчас все options вставляются.
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 month2=Number(month)+1;
var year = date.getFullYear();
let date2=year+'-'+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
}
}
