如何将迭代表行中的复选框值传递给Vue中的数组？

Question

我从数据库中获取一些数据并通过循环遍历它的行将其传递给<tbody>。这些行在子组件中，而 <tbody> 导入它们：

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

“id”是唯一的，因此应该表示“values”数组中的选中行（复选框）。然后我通过改变beforeUpdate() Lifecycle Hook 中的操作在 Vuex 中保存“值”，并为其定义一个吸气剂，以便能够在我的应用程序的任何地方使用此状态。另一方面，我正在导入这个子组件并将数据从数组“tableBody”传递给它。就像这样：

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

这里是我的 store.js 文件中的 State、mutation、action 和 getter：

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;

问题是，所有这些只是将“id”的值保存在“values”数组的实际行中。如果我检查了五行，那么“值”是一个长度为 1 的数组，其值为最后检查的行。但我需要的是用所有检查行的值填充这个数组。 我已经看到了一些通过在<ul> 中迭代<li> 来完美运行的例子。也许这取决于我正在使用的 html 标签？ 很高兴知道我做错了什么以及如何解决它。

Answer 1

tableBody 组件中的values 是本地数据，不会在行之间共享。

我看到你想将数据保存到 vuex，你可能想实现如下：

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

要存储所有选中的行，在你的突变中，你需要连接数组，而不是重新分配它：

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

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