Vue에서 반복 테이블 행의 확인란 값을 배열로 전달하는 방법은 무엇입니까?

Vue에서 반복 테이블 행의 확인란 값을 배열로 전달하는 방법은 무엇입니까?

데이터베이스에서 데이터를 가져와 데이터를 전달합니다.<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" 배열에서 선택한 행(확인란)을 나타내야 합니다.그런 다음 Vuex에서 작업을 변환하여 "값"을 저장합니다.beforeUpdate()라이프사이클 후크 및 내 앱의 모든 곳에서 이 상태를 사용할 수 있는 게터를 정의합니다.다른 한편으로는 이 하위 구성 요소를 가져와 배열 "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 파일의 상태, 변환, 액션 및 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" 값을 저장한다는 것입니다.다섯 개의 행을 선택한 경우 마지막으로 선택한 행의 값을 가진 길이가 1인 배열이 "값"입니다.하지만 이 배열을 선택한 모든 행의 값으로 채우는 것이 필요합니다.반복을 통해 완벽하게 작동하는 몇 가지 예를 보았습니다.<li>에<ul>혹시 제가 사용하는 HTML 태그에 따라 다를 수도 있나요?내가 무엇을 잘못하고 있고 어떻게 고칠 수 있는지 알면 좋을 것 같습니다.

values당신의tableBody구성 요소는 로컬 데이터이므로 행 간에 공유되지 않습니다.

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

언급URL : https://stackoverflow.com/questions/50444585/how-to-pass-down-checkbox-values-from-an-iterating-table-row-to-an-array-in-vue