Javascript 在复选框中删除Vue JS中的元素

在选中复选框时，将新元素添加到数组

evento

可以正常工作，但在取消选中复选框时，如何删除元素

玩它：

v-model

不是一个选项，因为我使用的是来自GraphQL的非常复杂的结构和vuex存储

    <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>

{{lang}}


evento:{{evento}
var app=新的Vue({
el:#myapp“，
数据：{
语言：[
“phppppppppppppppppppppppp”，
“Vue.js”，
“爪哇”，
“C”，
“AngularJS”，
“jQuery”，
“JavaScript”
],
事件：[]
},
方法：{
returnArray:函数（lang）{
log（“lang:+lang”）；
设arreglo=[]；
log（“evento:+JSON.stringify（this.evento））；
//阿格雷加·德尔阿雷格洛·德尔阿雷格洛·德尔阿雷格洛·德尔阿雷格洛·德尔阿雷格洛·德尔阿雷格洛·德尔阿雷格洛·德尔阿雷格洛·德尔阿雷格洛·德尔阿雷格洛·德雷
//如果evento中不存在语言，则将语言添加到数组中
如果（！this.evento.includes（lang））{
arreglo.push.apply（arreglo，this.evento）；
推（郎）；
console.log（“ENTRO！”）；
}
log（“arreglo:+JSON.stringify（arreglo））；
console.log（“+++++++++++：”；
返回arreglo；
}
}
});

由于这一行中的关联，数组

evento

被完全替换：

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

因此，一个简单的解决方法是创建一个方法来正确更新数组并调用它，而不是进行上述关联：

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

方法的内容跟踪

evento

中的元素：

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

---

然而，这似乎不太恰当，但应该可以回答您当前的问题。如果您提供更多信息，我们可能会找到更好的方法。

由于这一行中的关联，数组

evento

被完全替换：

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

因此，一个简单的解决方法是创建一个方法来正确更新数组并调用它，而不是进行上述关联：

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

方法的内容跟踪

evento

中的元素：

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

---

然而，这似乎不太恰当，但应该可以回答您当前的问题。如果您能提供更多信息，我们可能会找到更好的方法。

我将使用bog标准切换技术，通过单击事件和索引/拼接：

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

//或者如果您只需要一次查找

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

...


{{lang}}


evento:{{evento}
var app=新的Vue({
el:“#myapp”，
数据：{
语言：[
“phpppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp，
“Vue.js”，
“Java”，
"C",，
“AngularJS”，
“jQuery”，
“JavaScript”
],
事件：[]
},
方法：{
切换语言（lang）{
如果（！this.evento.includes（lang））{
this.evento.push（lang）
}否则{
this.evento.splice（this.evento.indexOf（lang），1）
}
}
}
})

---

Id使用bog标准切换技术，通过点击事件和索引/拼接：

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

//或者如果您只需要一次查找

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

...


{{lang}}


evento:{{evento}
var app=新的Vue({
el:“#myapp”，
数据：{
语言：[
“phpppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp，
“Vue.js”，
“Java”，
"C",，
“AngularJS”，
“jQuery”，
“JavaScript”
],
事件：[]
},
方法：{
切换语言（lang）{
如果（！this.evento.includes（lang））{
this.evento.push（lang）
}否则{
this.evento.splice（this.evento.indexOf（lang），1）
}
}
}
})