当我在 VueJS 中单击下一个或上一个按钮时显示一个列表

Question

我想在js视图中管理一个案例。我有一份到达部门并离开部门的员工名单。我的列表 return 为我提供了本周、下周和下周的 3 个对象（进入和退出）。默认情况下，我显示当前周的进入和退出，我想用两个按钮 previous 和 next 来显示其他周和 return 到前一周用上一个按钮。可以在 Vue JS

中调用手表

<template>
    <div class="employee-list">
        <ul>
            <li v-for="employee in employees" :key="employee.id">
                <div class="employee">
                    <p class="name">{{ employee.name }}</p>
                    <p class="dept">{{ employee.dept }}</p>
                </div>
            </li>
        </ul>
    </div>
    <div>
        <button type="button" @click="selectemployee(employee)" class="btn btn-primary btn-lg">Previous</button>
        <button type="button" @click="selectemployee(employee)" class="btn btn-secondary btn-lg">Next</button>
    </div>
</template>

<script>
    export default {
        props: {
            employees: [
  {
    "inputs": [
      {
        "id": "38",
        "name": "Marcus",
        "dept": "Informatic Technology",
      },
      {  
        "id": "48",
        "name": "Dimitri",
        "dept": "Marketing",
      }
    ],
    "outputs": [
               {
        "id": "36",
        "name": "John",
        "dept": "Businnes",  
      },
      {
        "id": "82",
        "name": "Greg",
        "dept": "Marketing",
      }
               ]
  },
  {
    "inputs": [
               {
        "id": "50",
        "name": "Emilie",
        "dept": "Informatic Technology",
      },
      {
        "id": "15",
        "name": "Julian",
        "dept": "Marketing",
      }
               ],
    "outputs": [
       {
        "id": "60",
        "name": "Alan",
        "dept": "Informatic Technology",
      },
      {
        "id": "19",
        "name": "Mireille",
        "dept": "Marketing",
      }
    ]
  },
  {
    "inputs": [  
               {
        "id": "71",
        "name": "Dupond",
        "dept": "Informatic Technology",
      },
      {
        "id": "16",
        "name": "Dufourd",
        "dept": "Marketing",
      }
               ],
    "outputs": [
       {
        "id": "386",
        "name": "Tata",
        "dept": "Informatic Technology",
      },
      {
        "id": "198",
        "name": "Toto",
        "dept": "Marketing",
      }
    ]
  }
]
        },
        methods: {
            selectemployeePreviousOrNext(employee) {
            }
        }
    }
</script>

<style lang="scss" scoped>
.employees-list {
    flex: 2;
    max-height: 100%;
    height: 600px;
    overflow: scroll;
    border-left: 1px solid #a6a6a6;
    
    ul {
        list-style-type: none;
        padding-left: 0;

        li {
            display: flex;
            padding: 2px;
            border-bottom: 1px solid #aaaaaa;
            height: 80px;
            position: relative;
            cursor: pointer;

            &.selected {
                background: #dfdfdf;
            }

            span.unread {
                background: #82e0a8;
                color: #fff;
                position: absolute;
                right: 11px;
                top: 20px;
                display: flex;
                font-weight: 700;
                min-width: 20px;
                justify-content: center;
                align-items: center;
                line-height: 20px;
                font-size: 12px;
                padding: 0 4px;
                border-radius: 3px;
            }

            .employee {
                flex: 3;
                font-size: 10px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: center;

                p {
                    margin: 0;

                    &.name {
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

请问我该怎么做？

Answer 1

只需存储当前周索引并增加/减少该索引以更改周：

<template>
  <div>
    <div v-for="employee of weekEmployees">
      {{ employee.name}}
    </div>
    <button @click="prevWeek">Prev</button>
    <button @click="nextWeek">Next</button>
  </div>
</template>

<script>
export default {
  data () {
     return {
        week: 0,
        employees: [], // your array of 3 weeks of employees
     }
  },
  computed: {
    weekEmployees() {
      return this.employees[this.week]
    }
  },
  methods: {
    nextWeek() {
      if (this.week >= this.employees.length - 1) { return }
      this.week++
    },
    prevWeek() {
      if (this.week <= 0 ) { return }
      this.week--
    }
  }
}
</script>

Answer 2

如果我没理解错的话，试试下面的代码片段

new Vue({
  el: "#demo",
  props: {
    employees: {
      type:Array,
      default: () => [
        {"inputs": [{"id": "38", "name": "Marcus", "dept": "Informatic Technology",}, {"id": "48", "name": "Dimitri", "dept": "Marketing",}], 
        "outputs": [{"id": "36", "name": "John", "dept": "Businnes",}, {"id": "82", "name": "Greg", "dept": "Marketing",}]}, 
        {"inputs": [{"id": "50", "name": "Emilie", "dept": "Informatic Technology",}, {"id": "15", "name": "Julian", "dept": "Marketing",}], 
        "outputs": [{"id": "60", "name": "Alan", "dept": "Informatic Technology",}, {"id": "19", "name": "Mireille", "dept": "Marketing",}]}, 
        {"inputs": [{"id": "71", "name": "Dupond", "dept": "Informatic Technology",}, {"id": "16", "name": "Dufourd", "dept": "Marketing",}], 
        "outputs": [{"id": "386", "name": "Tata", "dept": "Informatic Technology",}, {"id": "198", "name": "Toto", "dept": "Marketing",}]}
      ]
    }
  },
  data() {
    return {
      week: {id: 0, title: "current week"}
    }
  },
  methods: {
    employeesFilter(w) {
      return this.employees[w]
    },
    selectemployee(w) {
      this.week.id += w
      this.week.id === 0 ? this.week.title = "current week" : this.week.id === 1 ? this.week.title = "next week" : this.week.title = "week after"
    }
  }
})

.employees-list {
  flex: 2;
  max-height: 100%;
  height: 600px;
  overflow: scroll;
  border-left: 1px solid #a6a6a6;
}
.employees-list ul {
  list-style-type: none;
  padding-left: 0;
}
.employees-list ul li {
  display: flex;
  padding: 2px;
  border-bottom: 1px solid #aaaaaa;
  height: 80px;
  position: relative;
  cursor: pointer;
}
.employees-list ul li selected {
  background: #dfdfdf;
}
.employee {
  flex: 3;
  font-size: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
p, ul {
  margin: 0;
}
.employee .name {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="employee-list">
    <p>{{ week.title }}</p>
    <ul>
      <li v-for="(employee, i) in employeesFilter(week.id)" :key="i">
      <p>{{ i }}-{{ employee.length }}</p>
        <ul v-if="employee.length">
          <li v-for="empl in employee" :key="empl.id">
            <div class="employee">
              <p class="name">{{ empl.name }}</p>
              <p class="dept">{{ empl.dept }}</p>
            </div>
          </li>
        </ul>
        <p v-else>no people this week</p>
      </li>
    </ul>
  </div>
  <div>
    <button type="button" v-show="week.id > 0" @click="selectemployee(-1)" class="btn btn-primary btn-lg">Previous</button>
    <button type="button" v-show="week.id < 2" @click="selectemployee(1)" class="btn btn-secondary btn-lg">Next</button>
  </div>
</div>

当我在 VueJS 中单击下一个或上一个按钮时显示一个列表

Display a list when i click next or previous button in VueJS

javascript

arrays

json

vue.js

vuejs2