vue.jsvue-resource

How to vueJs filtering in on-click


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


Solution

  • Are you mean this ??

    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/