[FIXED] How can I activate child category in treeview on the vue component?

Issue

I have two vue components.

My first component (parent component) like this:

<template>
    ...
        <ul class="filter-category" v-for="list in categories">
            <list-category :data="list" :category-id="categoryId"></list-category>
        </ul>
    ...
</template>
<script>
    ...
    export default {
        ...
        data() {
            return {
                categories: [
                    {
                        id: 1,
                        name: 'England',
                        children: [
                            {
                                id: 3,
                                name: 'Chelsea',
                                children: [
                                    {id: 7, name: 'Hazard'},
                                    {id: 8, name: 'Morata'}
                                ]
                            },
                            {
                                id: 4,
                                name: 'Manchester United',
                                children: [
                                    {id: 9, name: 'Pogba'},
                                    {id: 10, name: 'Lukaku'}
                                ]
                            }
                        ]
                    },
                    {
                        id: 2,
                        name: 'Spain',
                        children: [
                            {
                                id: 5,
                                name: 'Real Madrid',
                                children: [
                                    {id: 11, name: 'Ronaldo'},
                                    {id: 12, name: 'Bale'}
                                ]
                            },
                            {
                                id: 6,
                                name: 'Barcelona',
                                children: [
                                    {id: 13, name: 'Messi'},
                                    {id: 14, name: 'Suarez'}
                                ]
                            },
                        ]
                    }
                ],
                categoryId: 7
            }
        }
    }
</script>

My second component (child component) like this:

<template>
    <li>
        <!--parent-->
        <a v-if="isFolder" href="javascript:" @click="toggle">
            <span class="fa fa-fw" :class="icon"></span> {{data.name}}
        </a>
        <!--if not folding, we do not need an binding event-->
        <a v-else href="javascript:" :title="data.name"><span class="fa fa-fw fa-circle-o"></span> {{data.name}}</a>
        <!--children-->
        <ul v-if="isFolder" :class="isShow">
            <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search"></list-category>
        </ul>
    </li>
</template>
<script>
    export default {
        props: ['data', 'categoryId'],
        data() {
            return {
                open: false
            }
        },
        computed: {
            icon() {
                return {
                    'fa-plus': !this.open,
                    'fa-minus': this.open,
                }
            },
            isFolder() {
                return this.data.children && this.data.children.length
            },
            isShow() {
                return this.open ? 'show': 'hide'
            }
        },
        methods: {
            toggle() {
                this.open = !this.open
            }
        }
    }
</script>

If prop categoryId = id category in data categories, then I want the category active.

In my code, I want if the code executed, category hazard active like this:

==========================================================================

==========================================================================

How can I do it?

Solution

Two actually missing things:

• You have to add the conditional class attribute (:class="{active: data.id === categoryId}") using the Object Syntax:

    <a v-else href="javascript:" :title="data.name" :class="{active: data.id === categoryId}"><span class="fa fa-fw fa-circle-o"></span> {{data.name}}</a>
  

• You have to pass categoryId down the component tree (:category-id="categoryId"):

    <ul v-if="isFolder" :class="isShow">
        <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category-id="categoryId"></list-category>
    </ul>
  

Demo below.

Vue.component('list-category', {
  template: "#lc",
  props: ['data', 'categoryId', 'search'],
  data() {
    return {
      open: false
    }
  },
  computed: {
    icon() {
      return {
        'fa-plus': !this.open,
        'fa-minus': this.open,
      }
    },
    isFolder() {
      return this.data.children && this.data.children.length
    },
    isShow() {
      return this.open ? 'show' : 'hide'
    }
  },
  methods: {
    toggle() {
      this.open = !this.open
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      categories: [{
          id: 1,
          name: 'England',
          children: [{
              id: 3,
              name: 'Chelsea',
              children: [{
                  id: 7,
                  name: 'Hazard'
                },
                {
                  id: 8,
                  name: 'Morata'
                }
              ]
            },
            {
              id: 4,
              name: 'Manchester United',
              children: [{
                  id: 9,
                  name: 'Pogba'
                },
                {
                  id: 10,
                  name: 'Lukaku'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: 'Spain',
          children: [{
              id: 5,
              name: 'Real Madrid',
              children: [{
                  id: 11,
                  name: 'Ronaldo'
                },
                {
                  id: 12,
                  name: 'Bale'
                }
              ]
            },
            {
              id: 6,
              name: 'Barcelona',
              children: [{
                  id: 13,
                  name: 'Messi'
                },
                {
                  id: 14,
                  name: 'Suarez'
                }
              ]
            },
          ]
        }
      ],
      categoryId: 7
    }
  }
})

.active {
  background: yellow;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div>
    <ul class="filter-category" v-for="list in categories">
      <list-category :data="list" :category-id="categoryId"></list-category>
    </ul>
  </div>
</div>

<template id="lc">
    <li>
        <!--parent-->
        <a v-if="isFolder" href="javascript:" @click="toggle">
            <span class="fa fa-fw" :class="icon"></span> {{data.name}}
        </a>
        <!--if not folding, we do not need an binding event-->
        <a v-else href="javascript:" :title="data.name" :class="{active: data.id === categoryId}"><span class="fa fa-fw fa-circle-o"></span> {{data.name}}</a>
        <!--children-->
        <ul v-if="isFolder" :class="isShow">
            <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search" :category-id="categoryId"></list-category>
        </ul>
    </li>
</template>

Answered By - acdcjunior

Answer Checked By - David Goodson (PHPFixing Volunteer)