vue.js - How to vueJs filtering in on-click

Question

My code :

<ul id="filter"><li><a href="#" class="active">All</a></li>
<li><a href="#">In source</a></li>
<li><a href="#">Out source</a></li></ul>

<div v-for="asessesment in listAssesmentList">
<li>In source - Jhon</li>
 <li>Out source - Ryan</li>

Can I filter In source or Out source using in vueJs?

Thanks in advance

Answer 1

你是这个意思吗？？

var vm = new Vue({
  el: '#app',
  data: {
    sources: [{
      name: 'In Source',
      lists: [
        'John', 'Ryan', 'Matt'
      ]
    }, {
      name: 'Out Source',
      lists: [
        'Mimi', 'Mike', 'Edrick'
      ]
    }],
    filterText: ''
  },
  methods: {
    filter: function(name) {
      this.filterText = name;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
<div id="app">
  <ul>
    <li><a href="#" @click.prevent="filter('')">All</a>
    </li>
    <li><a href="#" @click.prevent="filter('In Source')">In Source</a>
    </li>
    <li><a href="#" @click.prevnet="filter('Out Source')">Out Source</a>
    </li>
  </ul>

  <ul v-for="source in sources | filterBy filterText in 'name' ">
    <li>
      {{ source.name }}
      <ol>
        <li v-for="user in source.lists | orderBy 'user'">{{ user }}</li>
      </ol>
    </li>
  </ul>
</div>

https://jsfiddle.net/quetzalarc/LdcdLqe3/2/