JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

    <aside id="left-panel">
        <!-- GENERAL FILTER -->
        GENERAL FILTER        
        <div class="searchy-widget">
            <div id="generalFilter">
                <nav>
                    <search-filter v-bind:categories="categories">
                    </search-filter>
                </nav>
            </div>
        </div>
        </aside>

JavaScript

//COMPONENTS
Vue.component('search-filter', {
    props: ['categories'],
    template: `
        <ul>
            <search-filter-child v-for='cat in categories' v-bind:category="cat" v-bind:key="cat.id">
            </search-filter-child>
        </ul>`,
    mounted: function() {
    var self = this
    		alert('this works! ' + this.categories[0].id);
        axios.get('/echo/json/')
            .then(function (response) {
            debugger
            		alert('this does not work: ' + self.categories[2].id);
            		//HELP ME!!
            		//loop through categories and manipulate using data from JSON
                //update categories
                this.categories[0].subCategories = response.data;
            });

    }
})
Vue.component('search-filter-child', {
    props: ['category'],
    template: `
        <li v-bind:id="category.id">
            <a href="#" v-on:click="toggle();">{{ category.name }} [+]</a>            
        </li>`,
    methods: {
        toggle: function () {            
            //display children
        }
    }
})

//GENERAL FILTER
//creating category Javascript array 
var gFilter = new Vue({
    el: '#generalFilter',
    data: {
        categories: [
            { id: '1', name: 'a' },
            { id: '2', name: 'b' },
            { id: '3', name: 'c' },
        ]
    }
})