Show/Hide div 在 Vue 渲染列表中

Question

我正在尝试学习 Vue，但我对它还是很陌生。

我有一个渲染列表。在每个项目中，我都有一个按钮，我想在该项目中 show/hide 一个 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>

我这样做的路线正确吗？任何使它起作用的建议都会很棒。

谢谢！

Answer 1

如果您希望每个项目都有自己的 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 在他的评论中正确指出的那样，您目前在 data 和 props 中都定义了 times。您需要重命名其中之一（vue 应该警告您）。

Show/Hide div 在 Vue 渲染列表中

Show/Hide div in a rendered list with Vue

html

javascript

css

vue.js

vue-component