JSFiddle - React, Tailwind, and code Playground

by zhouyulong

HTML

<div id="app">

  <ul>
    <li @click="toggle(item.category_id,item.category_name)" v-for="item in category" :class="{active: active == item.category_id}">{{ item.category_name }}</li>
  </ul>
  <br>
  <div class="layui-tab-content">
    <ul>
      <li v-for="item in categoryProducts">
        {{item.goods_name}}
      </li>
    </ul>

  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

CSS

.active {
  color: red;
  border-bottom: 1px solid red;
}

ul li {
  padding: 0 15px;
  float: left;
  list-style: none;
}

JavaScript

var vm = new Vue({
  el: '#app',
  data: {
    currentView: 'child1',
    active: '1',
    category: [{
      category_id: "1",
      category_name: "Apple"
    }, {
      category_id: "2",
      category_name: "Xiaomi"
    }],
    products: [{
      category_id: "1",
      goods_name: "iphone6s",
    }, {
      category_id: "1",
      goods_name: "macbook pro"
    }, {
      category_id: "2",
      goods_name: "hongmi5 Plus"
    }]
  },
  computed: {
    categoryProducts() {
      let that = this
      return this.products.filter(p => p.category_id === that.active)
    }
  },
  methods: {
    toggle(i, v) {
      this.active = i
      console.log(i)
        //this.currentView = v
    }
  }


})