在您的父组件

Question

在我的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循环添加一个模态组件，从而为每个项目创建一个模态，但是，例如，如果我有一个包含数千个项目的列表，这似乎并不理想。“ / p>

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

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

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

然后在我需要的时候以某种方式解雇了自定义数据。

但是，我不确定如何继续。如何使用v-for循环内的自定义信息触发此模式，该循环位于相对于App.vue的子组件中？

Answer 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>
    {{ data.foo }}
    <button @click="$emit('close')">Cancel</ebutton>
</template>

<强>脚本

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

希望有所帮助： - ）

Answer 2

虽然可接受的答案很好，但是模态组件必须仅针对该特定数据进行设计，并且不可重用。

这是我创建可重用模式的方式，无论数据和样式如何：

模式组件：

<template>
    <div  v-if="visible" class="modal-container">
          <!--  Modal content goes here -->
          <slot></slot>
          <button  @click="close">close</button>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            visible : false
        }
    },
    methods : {
        show(index){
            this.visible = true
        },
        close(){
            this.visible = false
        }
    }
}
</script>

<style>
   // general styles for modal
.modal-container{
}
<style/>

在父组件中的使用：

<template>
 <ul>
      <li v-for="(item, index) in myList" :key="index">
        <button @click="showModal(index)">Show Modal</button>
        <modal :ref="'modal_' + index">
             <!-- modal content goes here -->
             <div>{{ item.title }}</div>
             <div>{{ item.content }}</div>
        </modal>
      </li>
</ul>
</template>

<script>
import Modal from "./Modal";

export default {
  data(){
     return {
        myList : [
          { title : "title1", content : "content1"},
          { title : "title2", content : "content2"},
        ]
     }
  },
  components: {
    Modal
  },
  methods: {
    showModal(index) {
      let modal_id = "modal_" + index;
      this.$refs[modal_id][0].show(index);
    }
  }
};
</script>

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

2 个答案:

在您的父组件

在您的孩子（模态）组件