When clicking the next or previous button in VueJS, showcase a list

Question

When clicking the next or previous button in VueJS, showcase a list

I am looking to create a case management system in a JavaScript view. The system will track employees arriving and leaving a department, returning 3 objects (entries and exits) for the current week, next week, and the week after that. By default, the system displays the entries and exits for the current week. I would like to add two buttons, 'Previous' and 'Next', to allow users to navigate between the weeks. Is it possible to implement this using 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",
      }
    ],
    ...

Could you please advise on how I can achieve this functionality?

javascript arrays json vue.js vuejs2

Answer 1

Answer №1

If I have correctly understood your request, you can try using the following code snippet:

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>

Answer 2

If I have correctly understood your request, you can try using the following code snippet:

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>

Answer 3

Answer №2

To easily switch between weeks, keep track of the current week index and update it accordingly:

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

<script>
export default {
  data () {
     return {
        week: 0,
        employees: [], // array containing employee data for multiple weeks
     }
  },
  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 4

To easily switch between weeks, keep track of the current week index and update it accordingly:

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

<script>
export default {
  data () {
     return {
        week: 0,
        employees: [], // array containing employee data for multiple weeks
     }
  },
  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>

When clicking the next or previous button in VueJS, showcase a list

Answer №1

Answer №2

Similar questions

Analyzing file data while uploading the file

Encountering serialization errors in Keras when trying to convert [ 0 1 2 ... 63] to JSON due to deep learning

Can you tell me how to implement a shopping basket in vue.js that only appears when an item has been added to it?

Handsontable: How to update renderers when a row is deleted

Guide to displaying a template using Vue.js

The array is not preserved by Mongoose once the .map(...) loop has ended

What are the implications of adding custom attributes to HTML elements?

The declaration for "Control" is not present, possibly being restricted by its protection level

The background color of absolute divs fails to extend across the entire screen

Utilizing nested JSON arrays within AngularJS for complex data structures

Display the option to "Delete" the link only when there are multiple images in my image collection

Declaring a Javascript variable within an if statement does not alter the value of the global variable

Error: Recaptcha does not have a constructor method

Send the td value to a PHP script with the help of JavaScript

"Utilizing AJAX for Data Retrieval in a Form with Dynamically Generated

Clicking on an image in a jQuery autocomplete menu will trigger a data post to an Express

Transforming text into an image during an Ajax response

Escaping quotes in JavaScript

The API fails to update with new data after every request

Issue with Inline JavaScript in `href` tag not functioning correctly in Firefox