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

Question

我有一个带有复选框的表单组件需要 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>

我的 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)"

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

Vue 3 checkbox bound to vuex store will not check after unchecked

vue.js

vue-component

vuex