I am trying to store multiple row data in database. But after running foreach loop I am getting this error--Undefined array key "houseAreaTypeId""

my template--

<select
          v-model="tab.selectedHouseType"
          name="houseAreaTypeId[]"
        >
          <option
            v-for="houseType in houseTypes"
            :key="houseType.id"
            :value="houseType.id"
          >
            {{ houseType.name }}
          </option>
        </select>

script ---

export default {
        data() {
            return {
                tabs: [{
                    selectedHouseType: "",
                    rows: [{
                        selectedDecor: {},
                        selectedDes: "",
                    }],
                }],
               
            };
        },
        methods: {
            submit(){
            axios.post('/api/create-cart', {
                myArray: this.tabs
                }).then(({data})=>{
                    this.tabs.selectedHouseType = '',
                    this.tabs.decorTypes = ''
                    
            });
        },

laravel controller--

 public function createCart(Request $request)
    {
        if ($tabs = $request->get('myArray')) {
            foreach ($tabs as $tab) {
                HouseAreaCart::create([
                    'houseAreaTypeId' => $tab['houseAreaTypeId'],
                    

                ]);
            }
        }
        return response()->json();
    }

can anyone suggest me what's wrong in my code

CodePudding user response：

Where do you expect houseAreaTypeId to be coming from? This is your tabs data property:

tabs: [{
  selectedHouseType: "",
  rows: [{
    selectedDecor: {},
    selectedDes: "",
  }],
}],

Your available keys then are selectedHouseType and rows. Your select's v-model binds tab.selectedHouseType with the value of houseType.id so maybe you mean to access $tab['selectedHouseType'] which will give you back that houseType ID value?