title: How to pass down checkbox values from an iterating table row to an Array in Vue?
body: <p>I am getting some data from Database and pass it to the <code>&lt;tbody&gt;</code> by looping through it's rows. The rows are within a child component while the <code>&lt;tbody&gt;</code> imports them:</p>
  
  <pre><code>&lt;template&gt;
          &lt;tr&gt;
              &lt;td&gt;{{id}}&lt;/td&gt;
              &lt;td&gt;{{indId}}&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" :value="id" v-model="values"&gt;...&lt;/td&gt;
          &lt;/tr&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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)
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>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 <code>beforeUpdate()</code> 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:</p>
  
  <pre><code>&lt;template&gt;
          &lt;table class="data-table"&gt;
          &lt;tbody&gt;    
               &lt;tableBody 
               v-for="body in tableBody" :key="body.id"
              :id="body.id"
              :indId="body.ind_id"            
              /&gt;
          &lt;/tbody&gt;    
          &lt;/table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import tableBody from './TableParts/TableBody'
  export default {
      components: {
          tableBody
      },
      props: {
          tableBody: {
              type: Array,
              required: true
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here my State, mutation, action, and getter from my store.js file:</p>
  
  <pre><code>import Vuex from "vuex";
  import axios from "axios";
  const createStore = () =&gt; {
    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;
  </code></pre>
  
  <p>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 <code>&lt;li&gt;</code> in <code>&lt;ul&gt;</code>. 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.</p>