绑定到 vuex 商店的 Vue 3 复选框在取消选中后不会检查

Question

我有一个带有复选框的表单组件，该复选框需要为真/假。表单绑定到一个 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>

我的 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'];
        }
    }
}

感谢您的帮助！！

Answer 1

$event.target.value 是给on，而不是你需要使用$event.target.checked，它给true 或false。所以把模板改成：

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