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

Posted 2023-02-23

【中文标题】选择获取数据属性值并嵌入为选择选项

【英文标题】：Select get data attribute value and embed as select option

【发布时间】：2020-11-03 08:43:03

【问题描述】：

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

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

如果选择位置 1，则选项 data-times - 10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM 必须作为选项值嵌入到选择 name=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>

【问题讨论】：

在 select1 上使用 @change="method" 然后分解结果并将结果传递给 select2..

@Jazuly 感谢您的评论。但我不知道如何使用这个方法！！这就是为什么发布我的查询来学习和理解这些要求的语法。

data-times中的值可以修改吗？现在它不是一种易于解析的格式。这可能更容易：data-times="10:00 AM - 11:00 AM,10:30 AM - 11:30 AM，然后将其拆分为,。

【参考方案1】：

假设您可以对注入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>