Question

我有一个大问题:( 我正在构建一个预订应用程序，并试图在一个选项中循环显示日期，在另一个选项中循环显示时间。在正确的时间，时间应具有与日期相同的ID。我正在获取API的日期和时间，数据如下所示：

 "PossibleStartTimes": [{
    "Date": "2019-03-06T00:00:00+01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  }, {
    "Date": "2019-03-07T00:00:00+01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  }, {
    "Date": "2019-03-08T00:00:00+01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  }, {
    "Date": "2019-03-11T00:00:00+01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  }, {
    "Date": "2019-03-12T00:00:00+01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  },

在我的vue组件中有一个代码段：

    <b-select
      @input="onChange($event)"
      v-model="selectedDate"
      size="is-medium"
      expanded
    >
      <option disabled value>Välj Datum</option>
      <option
        v-for="(PossibleStartTime, index) in PossibleStartTimes"
        :key="PossibleStartTime.date"
        >{{ index }} {{ PossibleStartTime.Date }}</option
      >
    </b-select>
    <div class="times">
      <h2 class="title is-3">Välj tid</h2>
      <b-select size="is-medium" v-model="selectedTime" expanded>
        <option disabled value>Välj Tid</option>
        <option
          v-for="(PossibleStartTime, index) in PossibleStartTimes"
          :key="PossibleStartTime.time"
          >{{ index }} {{ PossibleStartTime.Times }}</option
        >
      </b-select>

我的想法是，当客户选择日期时，时间将基于第二个“ b-select”中日期的ID循环：（

我正在使用Buefy，并且时间只能根据客户选择的日期显示。

希望任何人都能理解我的意思：）

Answer 1

这是一种可能的方法：https://jsfiddle.net/umjLv0zq/2/

我使用的是标准select而不是b-select，但是在这种情况下没关系。

我做了什么：

我从您的@input="onChange($event)"中删除了select。如果通过v-model链接到属性，则没有必要。
我在每个选项中添加了绑定到:value的{{1}}。如果未指定，则PossibleStartTime.Date将链接到v-model内部，使<option>here</option>更改为selectedDate。您应该在那里不需要索引吗？
我添加了一个新的{{ index }} {{ PossibleStartTime.Date }}属性，该属性查找与computed相关的Times数组。如果找到一天，则返回selectedDate，否则返回空数组。
最后，第二个Times（在您的情况下为select）具有基于计算属性的选项。

顺便说一句。您的b-select绑定到:key或Date数组中的时间/小时。考虑一下它们是否真的独特。

Vue.js对象中的循环数组

1 个答案: