JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

.cang {
  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.cang)
    }
  },
  methods: {
    toggle(i, v) {
      this.cang = i
      console.log(i)
      //this.currentView = v
    }
  }


})