[英]Select get data attribute value and embed as select option
I am new to Vuejs.我是 Vuejs 的新手。 Requirement here, from backend they will configure time slot values into data-times attributes in array format.这里的要求是,他们将从后端将时隙值配置为数组格式的数据时间属性。
I need to extract and update this time slot based on location selected.我需要根据选择的位置提取和更新这个时间段。
If Location 1 is selected, option data-times - 10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM
have to embed as option value into select name=time
.如果选择位置 1,则选项data-times - 10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM
必须作为选项值嵌入 select name=time
中。
Also, if query parameter ?l=loc1
exists.. we need to preselect select name=location
and select name=time
need to change timeslot accordingly.此外,如果查询参数?l=loc1
存在.. 我们需要预先选择 select name=location
和 select name=time
需要相应地更改时隙。
Not sure how to bring this logic via Vuejs.不知道如何通过 Vuejs 带来这个逻辑。 Is there any possible way to bring this expected behaviour?有没有可能带来这种预期行为的方法?
<select name="location" class="chosen-select select-picker select-picker-link" aria-required="true" aria-invalid="false"> <option value="" disabled="disabled" selected="selected">Please select location</option> <option value="loc1" data-times="['10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM']">Location 1</option> <option value="loc2" data-times="['11:00 AM - 12:00 PM, 12:00 PM - 1:00 PM']">Location 2</option> <option value="loc3" data-times="['10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM, 11:30 AM - 12:30 PM']">Location 3</option> </select> <select name="time" class="chosen-select select-picker select-picker-link" aria-required="true" aria-invalid="false"> <option value="" disabled="disabled" selected="selected">Please select a timeslot</option> <option value="10:00 AM - 11:00 AM">10:00 AM - 11:00 AM</option> <option value="10:30 AM - 11:30 AM">10:30 AM - 11:30 AM</option> <option value="11:00 AM - 12:00 PM">11:00 AM - 12:00 PM</option> </select>
Assuming that you are allowed to make minor adjustments to the value injected into the data-times
attribute (needed to make parsing easier), you can simply use v-model
and then set up a watcher for the data property used in the v-model
binding of the location dropdown.假设您可以对注入data-times
属性的值进行细微调整(需要使解析更容易),您可以简单地使用v-model
,然后为v-model
中使用的 data 属性设置一个观察者位置下拉列表的绑定。
The check the query string, it is a matter of checking window.location.search
and then parsing it using URLSearchParams
.检查查询字符串,检查window.location.search
然后使用URLSearchParams
解析它。 If the value is truthy, then we can use it to set the value in v-model
.如果该值是真实的,那么我们可以使用它来设置v-model
中的值。 Since everything is reactive, any changes/mutations to the v-model
value will update the second select dropdown.由于一切都是反应性的,对v-model
值的任何更改/突变都将更新第二个 select 下拉列表。
Check out the proof-of-concept below:查看下面的概念验证:
new Vue({ el: '#app', data: function() { return { location: '', time: '', times: [] }; }, mounted() { // Parse `?l=<LOCATION>` during app mounted hook // For testing, you can try: // const query = new URLSearchParams('?l=loc3'); const query = new URLSearchParams(window.location.search); if (query.get('l')) { this.location = query.get('l'); } }, watch: { location: { immediate: true, handler: async function() { // Wait for DOM to update before attempting to access DOM elements await this.$nextTick(); // Reset selection in time this.time = ''; // Re-populated array of available times this.times = this.$refs.locationEl.selectedOptions[0].dataset.times.split(','); } } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <select name="location" v-model="location" ref="locationEl"> <option value="" disabled="disabled" selected="selected">Please select location</option> <option value="loc1" data-times="10:00 AM - 11:00 AM,10:30 AM - 11:30 AM">Location 1</option> <option value="loc2" data-times="11:00 AM - 12:00 PM,12:00 PM - 1:00 PM">Location 2</option> <option value="loc3" data-times="10:00 AM - 11:00 AM,10:30 AM - 11:30 AM, 11:30 AM - 12:30 PM">Location 3</option> </select> <select name="time" v-model="time"> <option value="" disabled="disabled" selected="selected">Please select a timeslot</option> <option v-for="(time, i) in times" v-bind:key="i" v-bind:value="time">{{ time }}</option> </select> <ul> <li><strong>Location:</strong> {{ location }}</li> <li><strong>Time:</strong> {{ time }}</li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.