[Vuejs]-Different result computed for several input Vue.js

by

0👍

You are using same variable to filter each input and the filtered list is also same for each input.
In order to separate them you have to declare separate variables, I suggest you use an array

let app =   new Vue({
    el:"#app",
    data:{
      filter: ['', '', ''],
      userList : ['user1','user2','user3','user4','user5']
    },
    computed: {
      filterUsers()
      {
          return this.filter.map(f => {
            return this.userList.filter(user => {
              return user.toLowerCase().includes(f && f.toLowerCase())
            });
          });
      },
   },
   methods: {
      setFilterArray(value, index) {
        this.$set(this.filter, index, value);
      }
   }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="row p-5">
    <input type="text" id="p1" placeholder="Enter ..." class="form-control" :value="filter[0]" @input="setFilterArray($event.target.value, 0)">
    <div class="result-section">
        <div class="user-list" v-for="user in filterUsers[0]">
            <div class="label">{{user}}</div>
        </div>
    </div>
</div>
<div class="row p-5">
    <input type="text" id="p2" placeholder="Enter ..." class="form-control" :value="filter[1]" @input="setFilterArray($event.target.value, 1)">
    <div class="result-section">
        <div class="user-list" v-for="user in filterUsers[1]">
            <div class="label">{{user}}</div>
        </div>
    </div>
</div>


<div class="row p-5">
    <input type="text" id="p3" placeholder="Enter ..." class="form-control" :value="filter[2]" @input="setFilterArray($event.target.value, 2)">
    <div class="result-section">
        <div class="user-list" v-for="user in filterUsers[2]">
            <div class="label">{{user}}</div>
        </div>
    </div>
</div>
</div>

Leave a comment