Question

我想与数据列表进行比较（一个是从服务器获取的，另一个是来自默认数据）。

来自服务器的数据：

        DateTime start = new DateTime();
        start = dateTimePicker1.Value;
        DateTime end = new DateTime();
        end = dateTimePicker2.Value;


        Enumerable.Range(0, 1 + end.Subtract(start).Days)
        .Select(offset => start.AddDays(offset))
        .ToArray();

        var dates = new List<DateTime>();

        for (var dt = start; dt <= end; dt = dt.AddDays(1))
        {
            dates.Add(dt);
            richTextBox1.Text = dt.ToString();

        }

前端javascript Vue组件的默认数据：

[
  {
    "id": 7,
    "day": "14 April 2017",
    "time_list": [
      {
        "id": 25,
        "time": "11:00 AM",
      },
      {
        "id": 28,
        "time": "08:00 PM",
      }
    ]
  },
  {
    "id": 7,
    "day": "13 April 2017",
    "time_list": [
      {
        "id": 33,
        "time": "11:00 AM",
      },
      {
        "id": 22,
        "time": "02:00 PM",
      },
    ]
  },
]

我想做的是在模板中：

default_time_data: ["11:00 AM", "02:00 Pm", "05:00 PM", "08:00 PM"]

我希望我很清楚，如果不是，请问。从今天早上起我就一直在挠头解决这个问题。你能帮帮我吗？

更新

我希望最终数据显示如下（来自上面的数据）：

<template>
    <div v-for="day in show_routine_data">

        check if the time from the day.time_list is same as the showTime_count

        For each default_time of default_time_data, check if any of the time of day.time_list is equal to the default_time.

        If the default_time is equal to the time, then show its id.
        Else, show no data
    </div>
</template>

Answer 1

基本上，您需要创建一个computed property来收集准备好呈现的数据。有关计算属性的文档：https://vuejs.org/v2/guide/computed.html

如果您需要提取一段数据，以某种方式对其进行格式化等，那么计算属性就是您的选择。

此外，您还需要两个v-for循环：一个循环遍历块，一个嵌套循环遍历时间ID。

以下是一个例子：

＆＃13;

new Vue({
  el: '#app',
  data: {
    myArr: [
      {
        "id": 7,
        "day": "14 April 2017",
        "time_list": [
          {
            "id": 25,
            "time": "11:00 AM",
          },
          {
            "id": 28,
            "time": "08:00 PM",
          }
        ]
      },
      {
        "id": 7,
        "day": "13 April 2017",
        "time_list": [
          {
            "id": 33,
            "time": "11:00 AM",
          },
          {
            "id": 22,
            "time": "02:00 PM",
          },
        ]
      },
    ], 
    default_time_data: ["11:00 AM", "02:00 PM", "05:00 PM", "08:00 PM"]
  },
  computed: {
    dataToRender: function() {
      return (this.myArr && this.myArr.length > 0) // if data is already fetched
      	? this.myArr.map(e => Object.assign({ day: e.day }, 
          { 
            timeList: this.default_time_data
              // if time in default array - return id, otherwise 'No data'
              .map(dt => (e.time_list.map(({time}) => time).includes(dt)) ? e.time_list.find(tl => tl.time === dt).id : 'No data')
          }))
        : []; // if data hasn't arrived - return empty array
    }
  }
});

＆＃13;

<script src="https://unpkg.com/vue@2.3.3/dist/vue.min.js"></script>

<div id="app">
   <ul v-if="dataToRender.length > 0"> <!-- check if data exists -->
     <li v-for="item of dataToRender">
       <p>{{ item.day }}</p>
       <ul>
         <li v-for="time of item.timeList">{{ time }}</li>
       </ul>
     </li>
   </ul>
</div>

＆＃13;

Vuejs - 检查模板中是否显示两个不同列表的数据相同

1 个答案: