对于vue递归出来的组件,点击事件如何知道点击的是哪一个数据

fcxh
  • 434

比如,我有一组递归式的数据

{
    nodeName: "校长",
    childNode: [
        {
            nodeName: '副校长1',
            childNode:[
                {
                    nodeName: '胡主任',
                    ...
                }
            ]
        },
        {
            nodeName: '副校长2',
            childNode:[
                {
                    nodeName: 'liu主任',
                    ...
                }
            ]
        },
    ]
    
}

像这样的数据组织结构,用vue渲染递归组件的方式渲染出来后,类似与这样的:
图片描述

那么,当我点击图上某一个button时,数据层如何知道点击的是哪一个数据对象。比如点击后改变“名字”,应该如何操作。还是说我的数据组织方式有问题,不应该用json式的,用树结构来表示更好?

回复
阅读 3.7k
4 个回答
✓ 已被采纳

渲染的时候怎么渲染上去的,然后绑定click事件的时候把这个值传出来不就行了?

给每个节点加一个id吧,这样好操作

虽然有人回答了,但我还是要再写一次。?

<tempalte>
    <div v-for="i in item">
        <p v-on:click="getData(i)">{{ i.nodeName }}</p>
    </div>
</template>
<script>
export default{
    methods:{
        getData(value){
            console.log(value);
        }
    }
}
</script>

我比较倾向于用事件代理,一样可以拿到值。也不用怕递归多了绑定事件多了影响效率

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏