How to pass down checkbox values from an iterating table row to an Array in Vue?

Question

I am getting some data from Database and pass it to the <tbody> by looping through it's rows. The rows are within a child component while the <tbody> imports them:

<template>
        <tr>
            <td>{{id}}</td>
            <td>{{indId}}</td>
            <td><input type="checkbox" :value="id" v-model="values">...</td>
        </tr>
</template>

<script>
import { mapActions } from 'vuex'
export default {
data() {
    return {
            values: []
    }
},
props: {
        id: {
            type: String,
            reuired: true
        },
        indId: {
            type: String,
            reuired: true
        },
methods: {
    ...mapActions([
        'selectValues'
    ])

},
beforeUpdate(){
        this.selectValues(this.values)
    }
}
</script>

The "id" is unique and should be therefore representation of checked rows (checkboxes) in the "values" Array. Then am saving "values" in Vuex through mutating the action in the beforeUpdate() Lifecycle Hook and define a getter for it to be able to use this state everywhere in my app. On the other hand I am importing this child component and passing Data to it from the Array "tableBody". Just like this:

<template>
        <table class="data-table">
        <tbody>    
             <tableBody 
             v-for="body in tableBody" :key="body.id"
            :id="body.id"
            :indId="body.ind_id"            
            />
        </tbody>    
        </table>
</template>

<script>
import tableBody from './TableParts/TableBody'
export default {
    components: {
        tableBody
    },
    props: {
        tableBody: {
            type: Array,
            required: true
        }
    }
}
</script>

And here my State, mutation, action, and getter from my store.js file:

import Vuex from "vuex";
import axios from "axios";
const createStore = () => {
  return new Vuex.Store({
    state: {
      selectedValues: []
    },
    mutations: {
      selectValues(state, payload){
        state.selectedValues = payload;
      }
    },
    actions: {
      selectValues({commit}, payload){
        commit('selectValues',payload)
      } 
    },
    getters: {
      selectedValues(state){
        return state.selectedValues;
      }
    }
  });
};
export default createStore;

The problem is, all this things just save the value of "id" at the actual row in the "values" Array. If I've checked five rows then is the "values" an Array of length 1 with a value of last checked row. But what I need is to fill this Array with the values of all checked rows. I have seen a few examples where it works perfect through iterating <li> in <ul>. Maybe it depends on html Tags I am using? It would be great to know what I am doing wrong and how I can fix it.

Can you show your action and mutation where you save the data? — ittus
– ittus, Commented May 21, 2018 at 8:27

ittus · Accepted Answer · 2018-05-21 12:24:59Z

1

values in your tableBody component is local data, it will not be share between row.

I saw you want to save data to vuex, you might want to implement as below:

<template>
        <tr>
            <td>{{id}}</td>
            <td>{{indId}}</td>
            <td><input type="checkbox" :value="id" :checked="isSelected" @click="toggleValue">...</td>
        </tr>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
props: {
        id: {
            type: String,
            reuired: true
        },
        indId: {
            type: String,
            reuired: true
        },
methods: {
    ...mapActions([
        'selectValues',
        'deselectValues'
    ]),
    toggleValue() {
       if (!this.isSelected) {
         this.selectValues(this.id)
       } else {
        this.deselectValues(this.id)
       }
    }

},
computed: {
  ...mapState(['selectedValues']),
  isSelected () {
    return this.selectedValues && this.selectedValues.includes(this.id)
  }
}
</script>

To store all checked row, in your mutations, you need to concat array, instead of reassigned it:

selectValues(state, payload){
  state.selectedValues = state.selectedValues.concat([payload])
}

deselectValues (state, payload) {
  state.selectedValues = state.selectedValues.filter(item => item !== payload)
}

edited May 21, 2018 at 12:24

answered May 21, 2018 at 9:12

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

10 Comments

Subhan Asadli Over a year ago

could you have a typo in the deselectValues mutation ?

Subhan Asadli Over a year ago

The console shows: Cannot read property 'filter' of undefined

Subhan Asadli Over a year ago

1 vote because it works, but not the best answer because it didn't solve the problem complete and it works very slow

ittus Over a year ago

I'm sorry, have typo errors in deselectValues . They should be state selectedValues instead of state.selectValues

Subhan Asadli Over a year ago

I have 3000 objects there and each of them contains 6 key value pairs

|

Collectives™ on Stack Overflow

How to pass down checkbox values from an iterating table row to an Array in Vue?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related