delete element in Vue JS in checkbox

Question

Adding new elements into array evento works fine when checking the checkbox, but how can I delete an element when I uncheck the checkbox?

Play with it: https://codesandbox.io/s/heuristic-currying-uqib1?file=/index.html

v-model is not an option because I'm working with a very complex structure that comes from GraphQL, and a vuex store

    <div id="myapp">
      <!-- Checkboxes list -->
      <ul>
        <li v-for="lang in languages">
          <input
            type="checkbox"
            v-bind:value="returnArray(lang)"
            v-bind:checked="evento.includes(lang)"
            v-on:input="evento = $event.target._value"
          />{{ lang }}
        </li>
      </ul>
      evento : {{ evento }}
    </div>

    <script>
      var app = new Vue({
        el: "#myapp",
        data: {
          languages: [
            "PHPPPPPPPPPPP",
            "Vue.js",
            "Java",
            "C",
            "AngularJS",
            "jQuery",
            "JavaScript"
          ],
          evento: []
        },
        methods: {
          returnArray: function (lang) {
            console.log("lang: " + lang);
            let arreglo = [];
            console.log("evento: " + JSON.stringify(this.evento));
            // agregar dentro del arreglo la seccion si no existe dentrol del evento
            // add language into array if does not exist in evento
            if (!this.evento.includes(lang)) {
              arreglo.push.apply(arreglo, this.evento);
              arreglo.push(lang);
              console.log("ENTRO!");
            }
            console.log("arreglo: " + JSON.stringify(arreglo));
            console.log("+++++++++++++: ");
            return arreglo;
          }
        }
      });
    </script>

Uchendu · Accepted Answer · 2020-11-13 18:29:48Z

1

The array evento is completely replaced because of the association in this line:

v-on:input="evento = $event.target._value"

So just a quick workaround is to create a method to update the array properly and call it instead of making aboves association:

v-on:input="updateArray(lang)"

Where the content of the method keeps track of the element in evento:

updateArray: function (lang) {
  if (!this.evento.includes(lang)) {
    this.evento.push(lang);
  } else {
    this.evento = this.evento.filter((l) => l !== lang);
  }
}

However, this seems not very properly but should answer your current question. If you'd provide more information, we might find something better.

answered Nov 13, 2020 at 18:29

Uchendu

1,06612 silver badges21 bronze badges

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

Comments

Lawrence Cherone · Accepted Answer · 2020-11-13 19:07:12Z

Id use the bog-standard toggle technique with a click event and a indexOf/splice:

<input
  type="checkbox"
  :checked="evento.includes(lang)"
  @click="toggleLang(lang)"
/>

toggleLang(lang) {
  if (!this.evento.includes(lang)) {
    this.evento.push(lang)
  } else {
    this.evento.splice(this.evento.indexOf(lang), 1)
  }
}

// or if you only want one lookup

toggleLang(lang) {
  if ((index = this.evento.indexOf(lang)) === -1) {
    this.evento.push(lang)
  } else {
    this.evento.splice(index, 1)
  }
}

<!DOCTYPE html>
<html>
  ...
  <body>
    <div id="myapp">
      <!-- Checkboxes list -->
      <ul>
        <li v-for="lang in languages">
          <input
            type="checkbox"
            :checked="evento.includes(lang)"
            @click="toggleLang(lang)"
          />{{ lang }}
        </li>
      </ul>
      evento : {{ evento }}
    </div>

    <script>
      var app = new Vue({
        el: '#myapp',
        data: {
          languages: [
            'PHPPPPPPPPPPP',
            'Vue.js',
            'Java',
            'C',
            'AngularJS',
            'jQuery',
            'JavaScript'
          ],
          evento: []
        },
        methods: {
          toggleLang(lang) {
            if (!this.evento.includes(lang)) {
              this.evento.push(lang)
            } else {
              this.evento.splice(this.evento.indexOf(lang), 1)
            }
          }
        }
      })
    </script>
  </body>
</html>

https://codesandbox.io/s/sad-sara-e7b3q

HannaM · Accepted Answer · 2022-02-10 09:17:35Z

The best solution =>

    deleteUsers() {
      this.users = this.users.filter(user => {
        if (user.selected === false) {
          return user;
        }
      });

In my case, for deleting by checkbox, this helped me ... in the users array there is a line selected : false.

  for (let i = 0; i < this.users.length; i++) {
        if (this.users[i].selected === true) {
          console.log(i)
          this.users.splice(i, 1);
        }
      }

Also maybe this will help you. But this is without the selected one in the users array.. And another array of the selected

 if (this.selected.length === 0) {
        this.msg = 'Please select to remove!!!'
      } else {
        this.msg = ' '
        for (let i = 0; i < this.selected.length; i++) {
          this.users.splice(this.selected, 1);
        }
        this.selected = []
        this.selectAll = false
      }
      for (let i = 0; i < this.selected.length; i++) {
        this.users.splice(this.selected[i], 1);
      }

Collectives™ on Stack Overflow

delete element in Vue JS in checkbox

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related