Vue如何得到分类ID传到商品列表?

当你点击分类的时候，你会获得分类ID，然后传递到产品列表，并按分类显示对应的产品。我知道以前做过jquery选项卡列表页功能，但第一次用vue做选项卡功能，实现这个功能需要一个计算categoryProducts阵列由分类ID。

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
    }
  }
})

最终效果图：