1

I'm having trouble selecting the options of a select with the start and end data inside the dynamic keys of the following multidimensional json:

rowsels: {"days":{"mon":{"start":"08:00","end":"18:00"},"tue":{"start":"09:00","end":"15:00"},"fou":{"start":"10:00","end":"19:00"},"fif":{"start":"15:00","end":"17:00"},"fri":{"start":"08:00","end":"18:00"},"sat":{"start":"24hours","end":"00:00"},"sun":{"start":"closed","end":"00:00"}},"obs":"We do not serve on weekends and holidays. Vacation in December until February."};

I needed to do something like this:

v-model="rowsels.days.{{ index }}.start"
v-model="rowsels.days.{{ index }}.end"

I've tried it in many other ways and nothing has worked out until now.

Can someone help me? ♥

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

new Vue({
        el: "#timesvue",
        data: {
           rowsels: {"days":{"mon":{"start":"08:00","end":"18:00"},"tue":{"start":"09:00","end":"15:00"},"fou":{"start":"10:00","end":"19:00"},"fif":{"start":"15:00","end":"17:00"},"fri":{"start":"08:00","end":"18:00"},"sat":{"start":"24hours","end":"00:00"},"sun":{"start":"closed","end":"00:00"}},"obs":"We do not serve on weekends and holidays. Vacation in December until February."},
           rows: {"mon":"Monday","tue":"Tuesday","fou":"Fourth","fif":"Fifth","fri":"Friday","sat":"Saturday","sun":"Sunday"}
        }
    });
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="timesvue">
	<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="'time[days]['+index+'][start]'" 
                v-model="rowsels.days.{{ index }}.start">

				<option value="closed">Closed</option>
				<option value="24hours">24 hours</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="'time[days]['+index+'][end]'"
             v-model="rowsels.days.{{ index }}.end">

				<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>

1 Answer 1

2

Use [] instead of {{}}; mustache ({{}}) is used for text interpolation, and it cannot 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"
1
  • The way you said this is correct, I was using a dot before [ -> .days.[index] . Thank you so much for helping me. Nov 18, 2018 at 17:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.