在我的vue.js应用程序中，我需要显示用户可以单击的项目列表 .

单击时，这些项目中的每一个都应该触发一个模态，其中包含有关用户刚刚单击的项目的其他信息 .

到目前为止我在 Items.vue 组件中的内容是：

<template>
    <div id="content">
        <li v-for="item in items" class="list-item pa2 ba">
            <div class="f5 pt2 pb2">
                <span>{{item.name}}</span>
            </div>
        </li>
    </div>
</template>

<script>
    import Items from '@/api/items';

    export default {
        name: 'items',
        asyncComputed: {
            items: {
                async get() {
                    const items = await Items.getAll();
                    return items.data;
                },
                default: []
            }
        },
        components: {}
    }
</script>

现在，我可以简单地将一个模态组件添加到 v-for 循环中，从而为每个项目创建一个模态，但是，例如，如果我有一个包含数千个项目的列表，这似乎并不理想 .

这让我相信模式应该放在应用程序的根目录（在我的情况下是 App.vue ），如下所示：

<template>
    <div id="app">
        <modal></modal>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

然后在我需要时以某种方式用自定义数据解雇 .

但是，我不知道该怎么办 . 如何使用 v-for 循环内的自定义信息触发此模态，该循环位于相对于 App.vue 的子组件中？

1 回答

这两个链接帮助我解决了这个问题：

在您的父组件中

您不必为v-for循环中的每个项创建模态，只需在父项的开头包含模态组件，然后使用v-if =“...”和props .

<template>
  <div>
    <modal v-if="modalVisible" @close="modalVisible = false" :data="modalData"/>

    <div v-for="item in items">
      <button type="button" @click="openModal(item)">Open Modal</button>
    </div>

  </div>
</template>

然后在你的脚本中：

import modal from './Modal'

export default {
  components: {
    modal
  },
  data() {
    return {
      modalVisible: false,
      modalData: null
    }
  },
  methods: {
    openModal(data) {
      this.modalData = user
      this.modalVisible = true
    },
  }

在您的孩子（模态）组件中

在您的模态中，您现在可以执行以下操作：

Template:

<template>
    {{ data.foo }}
    <button @click="$emit('close')">Cancel</ebutton>
</template>

Script

<script>
  export default {
    props: ['user']
  };
</script>

希望有所帮助:-)

回复于 2024-04-19T19:13:25+08:00

使用Vuejs，如何以正确的方式在v-for循环内使用模态组件

1 回答

在您的父组件中

在您的孩子（模态）组件中

相关问题