D
D
Dmitry2020-12-05 22:58:55
Vue.js
Dmitry, 2020-12-05 22:58:55

How to correctly write v-model for a multidimensional array of data in a form?

I confess, I gave up, I'll try to find advice here.

I am rewriting the forms of the old site from php to vue. Work Schedule Module.

<div v-for="(city,index) in cities">
       <schedule
          :item="city"
          @form-saved="saveData">
      </schedule>
   </div>

in the form itself my trash begins (the habit of working with php and arrays .. in the old form it was like this.
<?php foreach ($data['days'] as $key=>$day): ?>
            <label> <?php echo $day['rus']; ?>
            </label>
            <input type="text" name="<?php echo $day['eng'];?>[open]" value="" class="time_input">---
            <input type="text" name="<?php echo $day['eng'];?>[close]" value="" class="time_input"><span class="extra">примечание</span>
            <input type="text" name="<?php echo $day['eng'];?>[extra]" value=""><?php endforeach; ?>

and then I sort of serialized it all through jquery.

Now I'm trying this way and that to form a more or less required array, but I can't manage to bind three fields to the day of the week and then to the city.

<div v-for="(day,index) in days" :key="day.engname">
                <label class="block bg-academy text-white"> {{day.rus}} </label>
                    <input type="text" v-model="city.open[index]"  class="time_input">---
                    <input type="text" v-model="city.close[index]" class="time_input"><span class="extra">примечание</span>
                    <input type="text" v-model="city.extra[index]" >
               </div>


v-model="city.close[index]" I already tried to bind in days. And so and so, but I just don’t understand apparently (

city:{
            id:this.item.id,
            open:[], //вот как сюда прикрутить дни недели?(
            close:[],
            extra:[]
        },

        days:[
            {rus:'Понедельник',
            engname:'monday',
            open:'', // это я привязывал к дням через v-model="days[index].open" но сюда никак город
            close:'',
            extra:''
            },
            {rus:'Вторник',
            engname:'tuesday',
             open:'',
            close:'',
            extra:''
            }
        ],


Now on an output such data I receive from the form.
"id": 1,
  "open": [
    "12-00", //это время понедельника
    "12-30" //это время вторника
  ],
  "close": [
    "21-30",
    "22-00"
  ],

but I would like
id:1
monday: {
open: ...,
close:...,
}.
I can’t master these complex forms in any way (advise, please.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question