我正在嘗試學習 Vue，但我對它還是很陌生。
我有一個渲染串列。在每個專案中，我都有一個按鈕，我想在該專案中顯示/隱藏一個 div。
我嘗試在 Vue 的檔案 ( https://vuejs.org/guide/essentials/conditional.html ) 中進行條件渲染，但這會同時為串列中的每個專案切換隱藏的 div。我假設這是因為在匯出資料中，它回傳一個變數，而我需要一個特定于專案的變數。
模板代碼：
<template>
<div v-for="time in times">
<div class="grid-container">
<div class="grid-item">
<strong>Time:</strong><br>
<h5>{{ time.date_time }}</h5>
</div>
<div class="grid-item">
<strong>Is Reserved: </strong><br>
<h5>{{ time.is_reserved }}</h5>
</div>
<div class="grid-item">
<button @click="isVisible = !isVisible">Toggle Hidden Area</button>
</div>
<div class="grid-item">
<div v-if="isVisible">Hidden by Default</div>
</div>
</div>
</div>
</template>
腳本代碼：
<script>
import axios from "axios";
export default {
name: 'Times',
props: {
times: Array
},
data() {
return {
times: [],
isVisible: false
}
},
async created() {
axios
.get('http://127.0.0.1:5000/api/v1/appointments/2022/3/13')
.then(response => (this.times = response.data))
},
methods: {
}
}
</script>
我走的是正確的路線嗎？任何讓這個作業的建議都會很棒。
謝謝！
uj5u.com熱心網友回復：
如果您希望每個專案都有自己的isVisible道具，則不能使用全域道具。從服務器獲取它們后，您需要為每個專案分配一個單獨的道具。例子：
<script>
export default {
// ....
created() {
axios
.get('http://127.0.0.1:5000/api/v1/appointments/2022/3/13')
// mapping isVisible to each item, dynamically:
.then(response => (this.times = response.data.map(item => ({
...item,
isvisible: false
}))));
}
// ....
}
</script>
<template>
<div>
<div v-for="(time, key) in times" :key="key">
<!-- ... -->
<div class="grid-item">
<button @click="time.isVisible = !time.isVisible">Toggle Hidden Area</button>
</div>
<div class="grid-item">
<div v-if="time.isVisible">Hidden by Default</div>
</div>
</div>
</div>
</template>
筆記：
- Vue2 組件中的根 HTML 元素不能超過一個（從技術上講，你可以，但你需要使用渲染函式 - 假設它很快變得復雜）
- 我只寫了您需要更改的內容，而不是整個組件。
- 正如@hamid-davodi 在他的評論中正確指出的那樣，您目前已經在and中
times定義了。您需要重命名其中一個（vue 應該警告您）。dataprops
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442945.html
標籤：javascript html css Vue.js Vue组件