在我的vue.js應用程序中，我需要顯示用戶可以單擊的項目列表。使用Vuejs，如何在v-for循環內使用正確的模式組件

點擊後，這些項目中的每一個都會觸發一個模式，其中包含用戶剛剛單擊的項目的附加信息。

我有我的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？

來源

2017-10-07 Tiago

這兩個環節上幫助我弄清楚了這一點：

在你父組件

您不必創建對於v-for循環中的每個項目，模式都是簡單的在父母的開始處包含模態組件，然後使用v-if =「...」和道具。

<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>

希望幫助:-)

來源

2018-01-06 12:48:48 Pascal

使用Vuejs，如何在v-for循環內使用正確的模式組件

回答

在你父組件

在你的孩子（莫代爾）成分

相關問題