Object filter with arrays on Vue.js?

Question

Vue.js

There are 2 selects, in the first value that come from the 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>

after selecting a value in the first select, its options are inserted into the second select

Please tell me how to throw (filter) only the array that was selected in the 1 select into the second select, now all 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 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
  }

  
}

Answer 1

in the first select, the menu number key ("3", for example) is passed to the model, a computed property is set that returns this.menu[to the model of the first select], this computed is substituted into the second select
https://codesandbox.io/ s/admiring-haslett-s6oci