How to use dynamic key in json multidimensional in v-model in vue.js?

Question

How to use dynamic key in json multidimensional in v-model in vue.js?

Navigation

#1 by (0 votes)

0

I have a problem selecting the options of a select with the start and end data inside the dynamic keys of the following multidimensional json:

 rowsels: {"dias":{"seg":{"inicio":"08:00","fim":"18:00"},"ter":{"inicio":"09:00","fim":"15:00"},"qua":{"inicio":"10:00","fim":"19:00"},"qui":{"inicio":"15:00","fim":"17:00"},"sex":{"inicio":"08:00","fim":"18:00"},"sab":{"inicio":"24horas","fim":"00:00"},"dom":{"inicio":"fechado","fim":"00:00"}},"obs":"N\u00e3o atendemos em finais de semanas e feriados. Entramos em f\u00e9rias em dezembro at\u00e9 fevereiro."};

I needed to do something like this:

v-model="rowsels.dias.{{ index }}.inicio"
v-model="rowsels.dias.{{ index }}.fim"

I have tried in many other ways and nothing has worked out so far.

Can anyone help me? ♥

Here is the complete code I'm trying to do:

new Vue({
        el: "#horariosvue",
        data: {
           rowsels: {"dias":{"seg":{"inicio":"08:00","fim":"18:00"},"ter":{"inicio":"08:00","fim":"18:00"},"qua":{"inicio":"08:00","fim":"18:00"},"qui":{"inicio":"08:00","fim":"18:00"},"sex":{"inicio":"08:00","fim":"18:00"},"sab":{"inicio":"24horas","fim":"00:00"},"dom":{"inicio":"fechado","fim":"00:00"}},"obs":"N\u00e3o atendemos em finais de semanas e feriados. Entramos em f\u00e9rias em dezembro at\u00e9 fevereiro."},
           rows: {"seg":"Segunda","ter":"Ter\u00e7a","qua":"Quarta","qui":"Quinta","sex":"Sexta","sab":"S\u00e1bado","dom":"Domingo"}
        }
    });

<script src="https://cdn.jsdelivr.net/npm/vue"></script><divid="horariosvue">
	<div class="form-group" v-for="(row, index) in rows">
		<div class="col-md-2">{{ row }}</div>
		<div class="col-md-5">
			<select v-bind:name="'horario[dias]['+index+'][inicio]'" 
                v-model="rowsels.dias.{{ index }}.inicio">

				<option value="fechado">Fechado</option>
				<option value="24horas">24 horas</option>
				<option value="00:00">00:00</option>
				<option value="00:30">00:30</option>
				<option value="01:00">01:00</option>
				<option value="01:30">01:30</option>
				<option value="02:00">02:00</option>
				<option value="02:30">02:30</option>
				<option value="03:00">03:00</option>
				<option value="03:30">03:30</option>
				<option value="04:00">04:00</option>
				<option value="04:30">04:30</option>
				<option value="05:00">05:00</option>
				<option value="05:30">05:30</option>
				<option value="06:00">06:00</option>
				<option value="06:30">06:30</option>
				<option value="07:00">07:00</option>
				<option value="07:30">07:30</option>
				<option value="08:00">08:00</option>
				<option value="08:30">08:30</option>
				<option value="09:00">09:00</option>
				<option value="09:30">09:30</option>
				<option value="10:00">10:00</option>
				<option value="10:30">10:30</option>
				<option value="11:00">11:00</option>
				<option value="11:30">11:30</option>
				<option value="12:00">12:00</option>
				<option value="12:30">12:30</option>
				<option value="13:00">13:00</option>
				<option value="13:30">13:30</option>
				<option value="14:00">14:00</option>
				<option value="14:30">14:30</option>
				<option value="15:00">15:00</option>
				<option value="15:30">15:30</option>
				<option value="16:00">16:00</option>
				<option value="16:30">16:30</option>
				<option value="17:00">17:00</option>
				<option value="17:30">17:30</option>
				<option value="18:00">18:00</option>
				<option value="18:30">18:30</option>
				<option value="19:00">19:00</option>
				<option value="19:30">19:30</option>
				<option value="20:00">20:00</option>
				<option value="20:30">20:30</option>
				<option value="21:00">21:00</option>
				<option value="21:30">21:30</option>
				<option value="22:00">22:00</option>
				<option value="22:30">22:30</option>
				<option value="23:00">23:00</option>
				<option value="23:30">23:30</option>
			</select>  
		</div>
		<div class="col-md-5">
			<select v-bind:name="'horario[dias]['+index+'][fim]'"
             v-model="rowsels.dias.{{ index }}.fim">

				<option value="00:00">00:00</option>
				<option value="00:30">00:30</option>
				<option value="01:00">01:00</option>
				<option value="01:30">01:30</option>
				<option value="02:00">02:00</option>
				<option value="02:30">02:30</option>
				<option value="03:00">03:00</option>
				<option value="03:30">03:30</option>
				<option value="04:00">04:00</option>
				<option value="04:30">04:30</option>
				<option value="05:00">05:00</option>
				<option value="05:30">05:30</option>
				<option value="06:00">06:00</option>
				<option value="06:30">06:30</option>
				<option value="07:00">07:00</option>
				<option value="07:30">07:30</option>
				<option value="08:00">08:00</option>
				<option value="08:30">08:30</option>
				<option value="09:00">09:00</option>
				<option value="09:30">09:30</option>
				<option value="10:00">10:00</option>
				<option value="10:30">10:30</option>
				<option value="11:00">11:00</option>
				<option value="11:30">11:30</option>
				<option value="12:00">12:00</option>
				<option value="12:30">12:30</option>
				<option value="13:00">13:00</option>
				<option value="13:30">13:30</option>
				<option value="14:00">14:00</option>
				<option value="14:30">14:30</option>
				<option value="15:00">15:00</option>
				<option value="15:30">15:30</option>
				<option value="16:00">16:00</option>
				<option value="16:30">16:30</option>
				<option value="17:00">17:00</option>
				<option value="17:30">17:30</option>
				<option value="18:00">18:00</option>
				<option value="18:30">18:30</option>
				<option value="19:00">19:00</option>
				<option value="19:30">19:30</option>
				<option value="20:00">20:00</option>
				<option value="20:30">20:30</option>
				<option value="21:00">21:00</option>
				<option value="21:30">21:30</option>
				<option value="22:00">22:00</option>
				<option value="22:30">22:30</option>
				<option value="23:00">23:00</option>
				<option value="23:30">23:30</option>
			</select> 
		</div>
	</div>
</div>

vue.js vue.js-2

asked by anonymous 18.11.2018 / 15:40

1 answer

Transparent data download with application form Uncaught Error TypeError: Can not read property 'length' of null

score 0 · Accepted Answer

I asked the same question in the English OS and had the following answer :

Use [] instead of {{}} ; mustache ({{}}) is used for text interpolation, and it can not be used inside HTML attributes , for which you need to use javascript expressions:
v-model="rowsels.days[index].start"
v-model="rowsels.days[index].end"

I've tried in a similar way:

v-model="rowsels.dias.[index].inicio"

But my mistake was to use the period before the bracket ( days. [index] ). The correct one should be: days [index] and look like this:

v-model="rowsels.dias[index].inicio"
v-model="rowsels.dias[index].fim"