- 首页
- 前端开发
- 使用 Vuejs，如何以正确的方式在 v-for 循环中使用模态组件
使用 Vuejs，如何以正确的方式在 v-for 循环中使用模态组件
[英] With Vuejs, how to use a modal component inside a v-for loop the right way
本文介绍了使用 Vuejs，如何以正确的方式在 v-for 循环中使用模态组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的 vue.js 应用程序中，我需要显示用户可以单击的项目列表.
当点击时，这些项目中的每一个都应该触发一个模式，其中包含有关用户刚刚点击的项目的附加信息.
到目前为止，我的 Items.vue 组件是:
<div id="内容"><li v-for="item in items" class="list-item pa2 ba"><div class="f5 pt2 pb2"><span>{{item.name}}</span>
<脚本>从@/api/items"导入项目；导出默认{name: '物品',异步计算:{项目: {异步获取(){const items = await Items.getAll();返回 items.data;},默认: []}},组件: {}}
现在，我可以简单地向 v-for 循环添加一个模态组件，从而为每个项目创建一个模态，但这似乎并不理想，例如，如果我有一个数以千计的项目.
这让我相信模态应该放在应用程序的根目录下(在我的例子中是 App.vue)，就像这样:
<div id="应用程序"><模态></模态><路由器视图></路由器视图>
</模板><脚本>导出默认{名称:'应用'}
然后在我需要时以某种方式触发自定义数据.
但是，我不确定如何继续.如何使用来自 v-for 循环内部的自定义信息触发此模式，该循环位于相对于 App.vue 的子组件中?
解决方案
这两个链接帮助我解决了这个问题:
#在你的父组件中您不必为 v-for 循环中的每个项目创建一个模态，只需在父级的开头包含模态组件，然后使用 v-if="...";和道具.
<div><modal v-if="modalVisible";@close="modalVisible = false";:data="modalData"/><div v-for=项目中的项目"><按钮类型=按钮";@click="openModal(item)">打开模态</button>
然后在您的脚本中:
从'./Modal'导入模态导出默认{组件: {模态},数据() {返回 {modalVisible:假，模态数据:空}},方法: {openModal(数据){this.modalData = 数据this.modalVisible = true},}
#在你的子(模态)组件中在您的模态中，您现在可以执行以下操作:
模板:
{{ data.foo }}<button @click="$emit('close')">取消</button>
脚本
希望有帮助:-)
In my vue.js app, I need to display a list of items which the user can click.
When clicked, each of these items should then fire a modal, containing additional information about the item that the user just clicked.
What I have so far in my Items.vue component is:
<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>
Now, I could simply add a modal component to the v-for loop, thus creating one modal for each item, but this does not seem ideal if, for example, I have a list of thousands of items.
This led me to believe that the modal should probably be placed at the root of the app (in my case App.vue), like this:
<template>
<div id="app">
<modal></modal>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
and then somehow fired with custom data whenever I needed it.
However, I'm not sure how to proceed. How do I fire this modal with custom information from inside the v-for loop, which is in a child component relative to App.vue?
解决方案
These two links helped me figure this out:
#In your Parent Component
You don't have to create a modal for each item within the v-for loop, simply include the modal-component at the beginning of your parent and then work with v-if="..." and 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>
and then in your script:
import modal from './Modal'
export default {
components: {
modal
},
data() {
return {
modalVisible: false,
modalData: null
}
},
methods: {
openModal(data) {
this.modalData = data
this.modalVisible = true
},
}
#In your child (modal) component
In your modal you can now do the following:
Template:
<template>
{{ data.foo }}
<button @click="$emit('close')">Cancel</button>
</template>
Script
<script>
export default {
props: ['user']
};
</script>
Hope that helps :-)
这篇关于使用 Vuejs，如何以正确的方式在 v-for 循环中使用模态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
