vuex 저장소에 바인딩된 Vue 3 확인란이 선택 해제된 후 확인되지 않음

vuex 저장소에 바인딩된 Vue 3 확인란이 선택 해제된 후 확인되지 않음

true/false 확인란이 있는 양식 구성 요소가 참/거짓이어야 합니다.양식은 vuex 저장소에 바인딩됩니다.

초기값을 true로 설정하면 로드 시 체크됩니다.그러나 이 체크박스를 끄면 값이 "On"으로 변경되어 다시 확인할 수 없습니다.

<div class="form-group form-check">
        <input type="checkbox" name="product_inventory_item" class="form-check-input" @change="updateWorkingProductDataField('product_inventory_item', $event.target.value)" v-model="workingProductData.product_inventory_item"/>
        <label class="form-check-label">Inventory Item?</label>
</div>

My Vuex 스토어:

export const state = {
    workingProductData: {
        product_inventory_item: true,

        //This value is changed to "on" when the checkbox is clicked
        //The check box will no longer check after it is unchecked
        //How do i set the value to true/false based on checked or unchecked?

    }
};

export const getters = {
    workingProductData: state => {
        return state.workingProductData;
    }
};

export const mutations = {
    updateWorkingProductDataProperty(state, payload){
        state.workingProductData[payload.field] = payload.value;
    },
};

export const actions = {
    updateWorkingProductData({commit, state}, payload){
        commit('updateWorkingProductDataProperty', payload);
    },
};

내 컴포넌트 오브젝트:

export default {
    name: "ProductForm",
    props: {
        editing: {
            type: Boolean,
            required: false,
            default: false,
        },
        categoryID: {
            type: Number,
            required: false,
            default: null
        }
    },
    data(){
        return {
        }
    },
    emits: ['updateProductData', 'addNewProductData'],
    methods:{
        updateWorkingProductDataField(field, value) {
            this.$store.dispatch('product/updateWorkingProductData', {field: field, value: value});
        },
        submitProductForm(){
           
        },
        clearFormData(){

        }
    },
    computed:{
        workingProductData: function() {
            return this.$store.getters['product/workingProductData'];
        },
        productCategories(){
            return this.$store.getters['productCategory/productCategories'];
        }
    }
}

도와주셔서 감사합니다!!

$event.target.value주고 있다on대신 를 사용해야 합니다.$event.target.checked즉,true또는false. 따라서 템플릿을 다음과 같이 변경합니다.

@change="updateWorkingProductDataField('product_inventory_item', $event.target.checked)"

언급URL : https://stackoverflow.com/questions/67238208/vue-3-checkbox-bound-to-vuex-store-will-not-check-after-unchecked