如何根据对象数据在vue js中显示视图？答案

【问题标题】：How to display view in vue js based on object data?如何根据对象数据在vue js中显示视图？
【发布时间】：2022-01-19 12:46:43
【问题描述】：

我的 JavaScript 有问题。我有变量数据中包含的数据。我想以表格形式显示数据变量中的数据，如下所示。

etc的含义是数据对象中dateTo字段的日期。需要明确的是，dateFrom 和 dateTo 字段原本是日期范围，将输出到一个日期数组中，从 dateFrom 中的日期开始到 dateTo 中的日期。要使用的日期格式是 new Date()。我在想的是使用计算或方法来获取基于 dateFrom 和 dateTo 的 arrayDates 内容的可能性。日期数组的输出概览如下所示：

arrayDates:["2022-01-24", "2022-01-25", "2022-01-26", ... "2022-02-28"]。

有人了解我的情况吗？谢谢。

<script>
export default {
    data(){
        return {
           datas: [
                {
                    "id": 1,
                    "name": "Sandra Brooke",
                    "schedule_time": [
                        { "id": 1,
                          "dateFrom": "2022-01-24",
                          "dateTo": "2022-02-28",
                          "schedule_day": [
                            {"id" 1,"days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 2,"days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 3,"days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 4,"days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 5,"days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00"},
                          ]
                        }
                    ]
                },
                {
                    "id": 2,
                    "name": "Michael Anderson",
                    "schedule_time": [
                        { "id": 1,
                          "dateFrom": "2022-01-24",
                          "dateTo": "2022-02-28",
                          "schedule_day": [
                            {"id" 1,"days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 2,"days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 3,"days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 4,"days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 5,"days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00"},
                          ]
                        }
                    ]
                },
                {
                    "id": 3,
                    "name": "Sarah Black",
                    "schedule_time": [
                        { "id": 1,
                          "dateFrom": "2022-01-24",
                          "dateTo": "2022-02-28",
                          "schedule_day": [
                            {"id" 1,"days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 2,"days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 3,"days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 4,"days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00"},
                            {"id" 5,"days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00"},
                          ]
                        }
                    ]
                },
            ],
        }
    },

    methods: {
        
    },

}

【问题讨论】：

标签： javascript arrays vue.js loops date

【解决方案1】：

尝试使用v-for

new Vue({
  el: '#app',
  name: 'App',
  data() {
    return {
      arrayDates: ["2022-01-24", "2022-01-25", "2022-01-26", "2022-02-27", "2022-02-28"],
      datas: [
        {
          "id": 1,
          "name": "Sandra Brooke",
          "schedule_time": [
            {
              "id": 1,
              "dateFrom": "2022-01-24",
              "dateTo": "2022-02-28",
              "schedule_day": [
                { "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
              ]
            }
          ]
        },
        {
          "id": 2,
          "name": "Michael Anderson",
          "schedule_time": [
            {
              "id": 1,
              "dateFrom": "2022-01-24",
              "dateTo": "2022-02-28",
              "schedule_day": [
                { "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
              ]
            }
          ]
        },
        {
          "id": 3,
          "name": "Sarah Black",
          "schedule_time": [
            {
              "id": 1,
              "dateFrom": "2022-01-24",
              "dateTo": "2022-02-28",
              "schedule_day": [
                { "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
              ]
            }
          ]
        },
      ],
    }
  },
})

table,
th,
td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
  <div>
    <div class="container">
      <table>
        <tr>
          <td></td>
          <td v-for="date in arrayDates" :key="date">
            {{ date }}
          </td>
        </tr>
        <template v-for="data in datas">
          <tr v-for="time in data.schedule_time" :key="time.id">
            <td>{{data.name}}</td>
            <td v-for="day in time.schedule_day" :key="day.id">
              {{day.startTime}} - {{day.endTime}}
            </td>
          </tr>
        </template>
      </table>
    </div>
  </div>
</div>

使用计算属性的示例实现如下

const getDatesBetweenDates = (startDate, endDate) => {
  let dates = []
  //to avoid modifying the original date
  const theDate = new Date(startDate)
  while (theDate < endDate) {
    const date = new Date(theDate);
    const dateStr = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
    dates = [...dates, dateStr]
    theDate.setDate(theDate.getDate() + 1)
  }
  return dates
}
new Vue({
  el: '#app',
  name: 'App',
  data() {
    return {
      datas: [
        {
          "id": 1,
          "name": "Sandra Brooke",
          "schedule_time": [
            {
              "id": 1,
              "dateFrom": "2022-01-24",
              "dateTo": "2022-02-28",
              "schedule_day": [
                { "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
              ]
            }
          ]
        },
        {
          "id": 2,
          "name": "Michael Anderson",
          "schedule_time": [
            {
              "id": 1,
              "dateFrom": "2022-01-24",
              "dateTo": "2022-02-28",
              "schedule_day": [
                { "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
              ]
            }
          ]
        },
        {
          "id": 3,
          "name": "Sarah Black",
          "schedule_time": [
            {
              "id": 1,
              "dateFrom": "2022-01-24",
              "dateTo": "2022-02-28",
              "schedule_day": [
                { "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
                { "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
              ]
            }
          ]
        },
      ],
    }
  },
  computed: {
    modifiedData() {
      const data = Object.assign([], this.datas);
      const dataObj = {
        header: [], // Holding headers
        values: [], // Holding parsed time
      }
      data.forEach((node) => {
        node.schedule_time.forEach((time) => {
          const fromDate = new Date(time.dateFrom);
          const toDate = new Date(time.dateTo);
          // Push the from date and to date to the header array
          dataObj.header.push(fromDate);
          dataObj.header.push(toDate);
          const rowObj = {
            name: node.name,
            id: node.id,
            schedule_time: {},
          }
          time.schedule_day.forEach((day, index) => {
            const newFromDate = new Date(fromDate);
            const date = new Date(newFromDate.setDate(newFromDate.getDate() + index));
            const dateStr = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
            // Save against the date string in the schedule_time object
            rowObj.schedule_time[dateStr] = {
              date,
              time: `${day.startTime} - ${day.endTime}`,
              id: day.id,
            };
          })
          dataObj.values.push(rowObj);
        });
      })
      // Generate unique date and sort it
      dataObj.header = Array.from(new Set(dataObj.header)).sort((a,b) => new Date(b.date) - new Date(a.date));

      // Fill the missing dates
      dataObj.header = getDatesBetweenDates(new Date(dataObj.header[0]), new Date(dataObj.header[dataObj.header.length - 1]));
      return dataObj;
    }
  }
})

table,
th,
td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
  <div>
    <div class="container">
      <table>
        <tr>
          <td></td>
          <td v-for="date in modifiedData.header" :key="date">
            {{ date }}
          </td>
        </tr>
        <tr v-for="value in modifiedData.values" :key="value.id">
          <td>{{value.name}}</td>
          <td v-for="day in modifiedData.header" :key="day.id">
            <p v-if="value.schedule_time[day]">
              {{value.schedule_time[day].time}}
            </p>
            <p v-else>
              No Record
            </p>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

【讨论】：

日期还是有误会，arrayDates不是手动填写的，而是arrayDate的内容是通过schedule_time中的dateFrom和dateTo字段循环得到的
所有节点的dateFrom 和dateTo 是否相同？
以后可能会有几个用户用例在dateFrom部分不一样，如果对于dateTo部分，结束日期可能是一样的，因为它是按月设置的.你有解决这个问题的办法吗？
也许您可以引用计算函数而不是引用“数据”，这样您就可以根据需要在该函数中格式化数据，而无需调整整个视图中的任何 v-for 逻辑。 vuejs.org/v2/guide/computed.html
你是对的，这可以使用计算，但我仍然不明白如何在我的情况下使用它。