Question

我正在使用Vue.js 2.5并且我有一个列表。每个项目都有一个用于切换详细信息的按钮。如果我点击一个按钮，则应关闭其他项目的所有详细信息，并且必须打开新项目。

这是我的一段代码：

根：

<template lang="pug">
    template(v-for="item in data")
        item-template(:item="item", :details_visible.sync="details_visible")
</template>

<script>
    export default {
        data() {
            return {
                data: [],
                details_visible: false
            }
        },
        mounted()
        {
            this.$on('close-all-event', function() {
                this.details_visible = false
            })
        }
    }
</script>

子：

<template lang="pug">
    .child
        span.button(@click="toggleDetails") More Details


        // Here are more details!!!!
        details-template(v-if="detailsOpen", :item="item")
</template>

<script>
    export default {
        props: {
            item: {
                type: Object,
                required: true
            },
            details_visible: {
                type: Boolean,
                default: false
            }
        },

        data: function() {
            return {}
        },

        methods:
        {
            toggleDetails: function (event) {
                // Close all Details from other Items
                //this.$parent.$emit('close-all-event')


                // Toggle Dummy... Only true...
                this.$emit('update:details_visible', true)
            }
        }
    }
</script>

使用此代码示例打开所有详细信息...如何修改代码，只打开一个孩子的详细信息？

Answer 1

添加属性current_visible并在父组件中将其设置为null。此current_visible属性应保留当前打开的详细信息视图项。作为道具传递给每个儿童组件。

<template lang="pug">
    template(v-for="item in data")
        item-template(:item="item", :current-visible="current_visible")
</template>

<script>
    export default {
        data() {
            return {
                data: [],
                current_visible: null
            }
        },
        mounted()
        {
            var self = this;
            this.$on('update-current-visible', function(ev) {
                if(current_visible == ev){
                    self.current_visible = null;
                }else{
                    self.current_visible = ev;
                }

            })
        }
    }
</script>

在您的子组件中，针对任何current_visible检查此item.uniqueProperty以显示更多详细信息。单击更多详细信息按钮时，将发出与事件一起传递item.uniqueProperty的事件。

<template lang="pug">
    .child
        span.button(@click="toggleDetails(item.uniqueId") More Details


        // Here are more details!!!!
        details-template(v-if="current-visible === item.uniqueId", :item="item")
</template>

<script>
    export default {
        props: {
            item: {
                type: Object,
                required: true
            },
            current-visible: [String, Number]
        },

        data: function() {
            return {}
        },

        methods:
        {
            toggleDetails: function (id) {
                this.$emit('update-current-visible', id)
            }
        }
    }
</script>

注意：请注意从我的平板电脑中回答此错误的错字

如何改变孩子的道具？

1 个答案: