vue.js - vue 遍历时怎样保证事件的独立性？

问题描述

问 题

页面效果

要求：下拉展开，上拉折叠。

问题：下拉全展开了。怎么更好的实现独立控制。

相关代码：

<template>
    <div class="up-page page-classify">
        <div class="classify-item" v-for="item in result">
            <div class="title">
                <img :src="item.industryInfo.industryImg">
                <span>{{item.industryInfo.industryNm}}</span>
            </div>
            <div class="content">
                <a class="grid" v-for="(_item, _index) in item.industryInfos" v-if="_index<7">
                    {{_item.industrySubNm}}
                </a>
                <a class="grid" v-if="item.industryInfos.length>7" @click="toggleTap">
                    <i class="iconfont icon-angle-down"></i>
                </a>
                <a class="grid" v-for="(_item, _index) in item.industryInfos" v-if="_index>6" v-show="clickItem">
                    {{_item.industrySubNm}}
                </a>
                <a class="grid" v-if="item.industryInfos.length>7" @click="toggleTap">
                    <i class="iconfont icon-angle-up"></i>
                </a>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .page-classify {
        background-color: #eaeaea;
    }

    .classify-item {
        line-height: 1rem;
        color: #333;
        .content {
            box-sizing: border-box;
            border-top: 1px solid #D8D8D8;
            border-left: 1px solid #D8D8D8;
        }
        .grid {
            height: 1rem;
            overflow: hidden;
            text-align: center;
            background-color: #fff;
            width: 25%;
            box-sizing: border-box;
            float: left;
            border-bottom: 1px solid #D8D8D8;
            border-right: 1px solid #D8D8D8;
        }
    }

</style>
<script type="text/babel">
    import ajax from '../service/service.js';
    export default{
        data(){
            return {
                title: 'classify',
                result: [],
                itemShow: true
            }
        },
        created(){
            let _this = this;
            ajax.post({
                url: 'shop/getIndustryInfo',
                callback: function (data, code, msg) {
                    if (100 == code) {
                        _this.result = data.body.result;
                    } else {

                    }
                }
            })
        },
        computed: {
            clickItem(index){
                return !this.itemShow;
            },
            industryInfos(){

            }

        },
        methods: {
            toggleTap(){
                this.itemShow = !this.itemShow;
            }
        }

    }
</script>

解决方案

把循环的内容写出组件。文档里有，组件部分。

这篇关于vue.js - vue 遍历时怎样保证事件的独立性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！