时间戳

首页 > 解决方案 > 选择获取数据属性值并嵌入为选择选项

javascript - 选择获取数据属性值并嵌入为选择选项

问题描述

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

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

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

另外，如果查询参数?l=loc1存在..我们需要预先选择选择name=location并且选择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>

标签： javascriptjqueryvue.js

解决方案

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

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

查看下面的概念验证：

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>

推荐阅读