如何在v-model中使用vue.js在多维json中使用动态密钥？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在v-model中使用vue.js在多维json中使用动态密钥？相关的知识，希望对你有一定的参考价值。
我在选择带有以下多维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."};
我需要做这样的事情：
v-model="rowsels.days.{{ index }}.start"
v-model="rowsels.days.{{ index }}.end"
我已经尝试过许多其他方式，直到现在还没有任何结果。
有人能帮我吗？ ♥
这是我要完成的完整代码：
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>答案
使用[]而不是{{}};小胡子（{{}}）用于文本插值，it cannot be used inside HTML attributes，你需要使用javascript表达式：
v-model="rowsels.days[index].start"
v-model="rowsels.days[index].end"
以上是关于如何在v-model中使用vue.js在多维json中使用动态密钥？的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js 如何在 v-model 输入的数组中定位具有未知名称的对象
如何在 Vue js 的 v-for 循环中使用 v-model
如何使用 v-model 和 v-if 使用 Vue.js 构建一个简单的计算器？