我想在 js 視圖中管理一個案例。我有一份到達部門并離開部門的員工名單。我的串列為我回傳了本周、下周和下周的 3 個物件（入口和出口）。默認情況下，我顯示本周的進入和退出，我想用兩個按鈕前一個和下一個顯示其他周，然后用上一個按鈕回傳前一周。可以呼叫手表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;
}
}
}
}
}
}
請問我該怎么做？
uj5u.com熱心網友回復：
如果我理解正確，請嘗試以下代碼段
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>uj5u.com熱心網友回復：
只需存盤當前周索引并增加/減少該索引以更改周：
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475550.html
標籤：javascript 数组 json Vue.js Vuejs2