Установите флажок внутри таблицы и получите или удалите идентификатор с помощью lodash - PullRequest
Новая
       6

Установите флажок внутри таблицы и получите или удалите идентификатор с помощью lodash

0 голосов
/ 05 марта 2019

Всем доброго времени суток,

Я пытаюсь создать таблицу с флажком.Когда я нажимаю флажок, идентификатор будет добавлен в массив объекта.Когда я снимаю галочку с конкретного флажка, он удаляет идентификатор из массива.

Итак, вот мой пример кода.

Таблица HTML 

...
<td><input type="checkbox" @click="checkThis(id)" /></td>
...

Мой пример vue.js code 

import _ from 'lodash'

export default {
    data(){
        return{
            myArray: []
        }
    },
    methods:{
        checkThis(id){
            // for removing an object inside the array
            _.remove(this.myArray, {myArrayId: id})

            // way to push to array
            this.myArray = [...this.myArray, {
                myArrayId: id
            }]
        }
    }
}

Этот код для удаления идентификатора, если пользователь снимает соответствующий флажок. 

_.remove(this.myArray, {myArrayId: id})

Но моя проблема в том, что когда я нажимаю флажок, он не знаеткакой идентификатор он должен удалить, или если флажок уже установлен или снят для определенного идентификатора.

Что я хочу сделать, так это то, что если он установлен в соответствующем флажке в таблице, он добавит идентификатор в массив, если он не отмечен, то он удалит идентификатор флажка в массиве..

Любая помощь, пожалуйста?

1 Ответ

0 голосов
/ 05 марта 2019

Здравствуйте, это то, что вы хотите?

Вы можете просто использовать флажок с v-моделью 

<div id="vue">
<input type="checkbox" v-model="checkbox" :value="1" />
<input type="checkbox" v-model="checkbox" :value="2" />
<input type="checkbox" v-model="checkbox" :value="3" />
{{checkbox}}
</div>


new Vue({
    el:'#vue',
  data:{
    checkbox:[],
  }
})

https://jsfiddle.net/ke5y39cf/

...