程式說明：我正在用 Vue.js 制作一個簡單的時間表程式。該頁面有一個“日歷”（一個 7 列的表格，其中每列對應一個特定的日期）和每個日歷列底部的按鈕。單擊按鈕時，模態應該在其正文內容中彈出特定日期。模態的 body-content 中的日期應該與放置按鈕的列標題中的日期相同。單擊forward或backward按鈕也可以更改日期。單擊forward所有日期時，向前移動一天。如果backward所有日期都向后移動一天。
程式方法：我有一個父組件App.vue和一個用于 modal 的子組件modal.vue。在作為屬性之一的父組件中，我有dateArr包含以下格式的 7 個不同日期的陣列：['9/11/21', '9/12/21', ..., '15/11/21']. 在App.vue安裝getDatesArray方法被稱為填補dateArr與日期屬性。單擊backward和forward currentOffset正在更改并且getDatesArray正在觸發方法。該表的第一行包含日期，因此，我創建v-for并逐一查看每個date在dateArr. 表的主體由每列 3 行組成。每列的最后一行包含一個獨特的按鈕和一個模式。在最后一排我想每個組件系結到特定的日期，所以我再一次迭代在每個date在dateArr。模態組件中有一個插槽，我在其中放置了 unique datefrom dateArr. 單擊按鈕時，模態的可見性隨change方法而變化。
問題：一切正常，但是，無論我單擊什么按鈕，date模態組件的內容 ( ) 都保持不變：15/11/21，它是陣列的最后一個元素。該程式的目的是date在每個模態組件內具有唯一的內容 ( )，核心屬性 ( dateArr) 是動態的。我已經嘗試為這個問題實施不同的解決方案，但沒有一個有用。我真的很感激任何幫助！
App.vue：
<template>
<table class = 'dataFrame'>
<thead>
<tr>
<th v-for="item in dayArr" :key="item.id">
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="index in [1,2,3]" :key="index">
<td v-for="item_index in dayArr.length" :key="item_index">
Dummy content
</td>
</tr>
<tr>
<td v-for="date in dayArr" :key="date.id">
<button @click="change"> </button>
<modal-component @changevisibility="change" v-if="modalToggled">
<p>{{ date }}</p>
</modal-component>
</td>
</tr>
</tbody>
</table>
<div class="buttonSection">
<button @click="currentOffset --" class="back" v-show="currentOffset >= -7">forward</button>
<button @click="currentOffset " class="forward" v-show="currentOffset <= 7">backward</button>
</div>
</template>
<script>
import basecard from './components/card.vue'
import navbarComponent from './components/menu.vue'
import modalComponent from './components/modal.vue'
export default {
data() {
return {
currentOffset: 0,
modalToggled : false,
dayArr: []
}
},
methods: {
change() {
this.modalToggled = !this.modalToggled
},
getDatesArray() {
let date = new Date();
date.setDate(date.getDate() this.currentOffset);
let dayArr = [];
for (let i = 0; i < 7; i ) {
let customDateArray = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric', hour: 'numeric', minute: 'numeric' }).formatToParts(date)
let dateParts = {}
customDateArray.map(({type, value}) => {
dateParts[type] = value
})
dayArr.push(`${dateParts.day}/${date.getMonth() 1}/${dateParts.year.slice(-2)}`)
date.setDate(date.getDate() 1);
}
this.dayArr = dayArr
}
},
mounted () {
this.getDatesArray()
},
watch: {
currentOffset () {
this.getDatesArray()
}
},
name: 'App',
components: {
modalComponent
}
}
</script>
<style>
#app {
display: flexbox;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50
}
.dataFrame {
border: 2px solid;
width: 100%;
border-color: #2c3e50;
}
.buttonSection {
margin-top: 1rem;
width: 100%;
max-height: 100%;
}
.back {
float: left;
}
.forward {
float: right;
}
</style>
modal.vue：
<template>
<div class="modal">
<div class="modal-content">
<slot></slot>
<button @click="changeVisibilityFromComponent">
<span class="close">Close ×</span>
</button>
</div>
</div>
</template>
<script>
export default {
name: 'modalComponent',
methods: {
changeVisibilityFromComponent () {
this.$emit('changevisibility')
},
}
}
</script>
<style scoped>
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
uj5u.com熱心網友回復：
我想到的第一件事是傳遞一個索引來改變函式，從而計算一些獨立于 v-for 回圈的值：
<td v-for="(date, index) in dayArr" :key="date.id">
<!-- pass index to change method -->
<button @click="change(index)" :id="index"> </button>
<modal-component @changevisibility="change(index)" v-if="modalToggled">
<!-- to slot pass the new variable -->
<!-- remember to add it to data() with some init value like null -->
<p>{{ currentDate }}</p>
</modal-component>
</td>
...
methods: {
change(index) {
// set currentDate value each time change method is being run
this.currentDate = this.dayArr[index];
this.modalToggled = !this.modalToggled
},
...
}
您遇到的問題的原因是 v-for 呈現專案串列并以與以下代碼相同的方式設定變數：
let x = 0;
for (i = 0; i < 10; i ) {
x = i;
}
console.log(x); // this will always console out x = 9
相反，事件處理（如@click）制定了一個指令，用于偵聽 DOM 事件并在每次觸發事件時運行一個方法。至少我是這么理解的……
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353941.html
標籤：javascript Vue.js