Vue search filter checkbox issue

Question

I have problem with checkboxes and vue filter of array.

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ],
    search: '',
  },
  methods: {
  	
  },
  computed: {
  	filtered() {
      return this.todos.filter(todo => {
        return todo.text.toLowerCase().includes(this.search.toLowerCase())
      })
    },
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="search">
  <ol>
    <li v-for="todo in filtered">
      <label>
        <input type="checkbox">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

If you check first from array and search for any of others:

Check -> Learn javascript

Search -> Learn Vue

Vue appear to be checked..

Is that suppose to work like that?

How can I remove all from displayed list and append same time?

Vue apears to be checked because of vue's optimization. Use v-model for each checkbox to avoid that. — piemekanika
– piemekanika, Commented Mar 1, 2019 at 9:11
The real question is, why is this happening, I'm also curious. — DedaDev
– DedaDev, Commented Mar 1, 2019 at 9:23
@Deda Because of vue's optimization proccess. It uses virtual DOM to do as little changes to DOM as possible. — piemekanika
– piemekanika, Commented Mar 1, 2019 at 9:29

Niklesh Raut · Accepted Answer · 2019-03-01 09:26:23Z

3

Use v-model to bind in filtered array

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle",done:true},
      { text: "Build something awesome"}
    ],
    search: '',
  },
  methods: {
  	
  },
  computed: {
  	filtered() {
      return this.todos.filter(todo => {
        return todo.text.toLowerCase().includes(this.search.toLowerCase())
      })
    },
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="search">
  <ol>
    <li v-for="todo in filtered">
      <label>
        <input v-model="todo.done" type="checkbox">
          <del v-if="todo.done">{{ todo.text }}</del>
          <span v-if="!todo.done">{{ todo.text }}</span>
          
      </label>
    </li>
  </ol>
</div>

Here is put checked by default for Play around in JSFiddle

edited Mar 1, 2019 at 9:26

answered Mar 1, 2019 at 9:14

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Learner Over a year ago

This works but, I am fetching 'todos' as data from database.... I need to append additional field for each...

Niklesh Raut Over a year ago

@Learner : what additional field ? can you share ?

Learner Over a year ago

That one for v model, like when I return data I return id, name and in todos array i have objects with id and name and for each I need to add done for v model

Niklesh Raut Over a year ago

can you add this in your question so that we can understand better.

Learner Over a year ago

you answered my question and it works, but I need to add custom field for each result from database for v-model, or to add it on client side but I need to go throught all and add like: todo[done] = false or something like that, seems like too much work for something like this...

|

piemekanika · Accepted Answer · 2019-03-01 09:21:58Z

1

Simply just add done: false in todos and add v-model="todo.done" to input in v-for.

Example on JSFiddle

Differences from your code:

// added `done`
todos: [
  { done: false, text: "Learn JavaScript"},
  { done: false, text: "Learn Vue"},
  { done: false, text: "Play around in JSFiddle"},
  { done: false, text: "Build something awesome"}
]

<!-- added `v-model="todo.done"` -->
<input v-model="todo.done" type="checkbox">

answered Mar 1, 2019 at 9:21

piemekanika

4452 gold badges7 silver badges14 bronze badges

2 Comments

JoePC Over a year ago

How to add done: false to your data (array of JSON objects): for (var i in data) { data[i]['done'] = false; } OR for (var i in data) { data[i].done = false; }

piemekanika Over a year ago

Both ways should work. Btw, it's better to create a computed method in your component with mutated (modified) array and use array's map function. Something like this computed: { todosWithMark() { return this.todos.map(todo => ({ ...todo, done: false})) } } and use it.

Collectives™ on Stack Overflow

Vue search filter checkbox issue

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related