Select 获取数据属性值并嵌入为 select 选项

Question

我是 Vuejs 的新手。 这里的要求是，他们将从后端将时隙值配置为数组格式的数据时间属性。

我需要根据选择的位置提取和更新这个时间段。

如果选择位置 1，则选项data-times - 10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM必须作为选项值嵌入 select name=time中。

此外，如果查询参数?l=loc1存在.. 我们需要预先选择 select name=location和 select name=time需要相应地更改时隙。

不知道如何通过 Vuejs 带来这个逻辑。 有没有可能带来这种预期行为的方法？

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

Answer 1

假设您可以对注入data-times属性的值进行细微调整（需要使解析更容易），您可以简单地使用v-model ，然后为v-model中使用的 data 属性设置一个观察者位置下拉列表的绑定。

检查查询字符串，检查window.location.search然后使用URLSearchParams解析它。 如果该值是真实的，那么我们可以使用它来设置v-model中的值。 由于一切都是反应性的，对v-model值的任何更改/突变都将更新第二个 select 下拉列表。

查看下面的概念验证：

 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>