обновить родительские данные из рекурсивного дочернего компонента - PullRequest
Новая
       9

обновить родительские данные из рекурсивного дочернего компонента

0 голосов
/ 18 декабря 2018

Я хотел бы реализовать представление дерева файлов с помощью html и vuejs, для этого у меня есть рекурсивный компонент для реализации дерева файлов с несколькими корнями, например так: Root 1 - elemnt 1.1 - elemnt 1.2 - ... Root 2 - element 2.1 - element 2.2 Я хочу сохранить последний нажатый элемент, так как я могу это сделать?это?

Это относительный код компонента: 

Vue.component('item', {
        template: `
        <li>
            <div @click='toggle(category)'>
                {{category.name}}

            <ul v-show="open" v-if="isFolder">
                <item v-for='category in category.children' :category='category'></item>
            </ul>
        </li>
        `,
        props: {
            category: Object
        },
        data(){
            return {
                open: false
            }
        },
        computed: {
            isFolder: function() {
                return this.category.children && this.category.children.length
            }
        },
        methods: {
            toggle(category){
                if (this.isFolder) {
                    this.open = !this.open
                }
            }
        }
    })

Это HTML 

<ul>
            <item v-for='cat in categories' :category='cat'></item>

        </ul>

1 Ответ

0 голосов
/ 18 декабря 2018

У вас проблема с реактивностью в глубине, документация VueJS дает хорошее объяснение: Реактивность в глубине - как отслеживаются изменения

Существует несколько способов вызвать рендерингкомпоненты.Самый очевидный из них будет this.$forceUpdate().Однако, это заставляет когда-либо компонент перерисовываться, и я не рекомендовал бы использовать его.Если запускаться несколько раз за короткое время, он может работать медленно.

Следующие два решения сравниваются гораздо лучше только с компонентом без других.

Первый способ запуска рендеринга: 

<script>
export default {
    data: () => {
        return {
            treeData: []
        }
    },
    methods: {
        updateTree () {
            const treeData = JSON.parse(JSON.stringify(this.treeData))
            this.treeData = []
            this.$nextTick(function () => {
                this.treeData = treeData
            })
        }
    }
}
</script>

Или вы можете просто использовать v-if для родителя и вызвать this.$emit('updateTree') от детей: 

<template>
    <child-component @update="updateTree" :treeData="treeData" />
</template>

<script>
import ChildComponent from '../components/ChildComponent'
export default {
    data: () => {
        return {
            showTree: true,
            treeData: []
        }
    },
    components: { 'child-component' : ChildComponent },
    methods: {
        fetchAPIData () {
            // ... ajax
            this.treeData = apiResponse
        },
        updateTree () {
            this.showTree = false
            this.$nextTick(function () => {
                this.showTree = true
            })
        }
    },
    mounted () {
        this.fetchAPIData()
    }
}
</script>
...