element ui switch , radio , checkbox。 true,false を 1,0 にする

radioボタン、checkbox よりも switch を使ったほうがわかりやすい。

大切なのは以下の2点

・el-switch で active,inactive の設定
・created で axios などを使って初期値を設定する場合は String を使って文字列にしておく

hoge.vue

<template>
    <div>

        <el-form ref="form" :model="form">
            <el-form-item label="Instant delivery">

                <!--active-value,inactive-value の切り替え-->
                <el-switch v-model="form.delivery"
                           active-value="1"
                           inactive-value="0">
                </el-switch>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">送信</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<script>

    export default {

        data() {
            return {
                form: {
                    delivery: ''
                }
            }
        },
        created () {

            //最初に初期値を設定する場合は、 String を使って文字列化しておく
            this.form.delivery = String(1);

        },
        watch: {

        },
        methods: {



            onSubmit(){

                let dataform = new FormData();

                dataform.append('delivery',this.form.delivery);
                
                axios.post('/hoge/test/', dataform).then(e => {
                }).catch((error) => {
                });


            }



        }
    };
</script>

追記

配列の中の block を toggle したい場合
axiosで取得した配列を一旦文字列にしておく

<div v-for="(v,key) in list">

    <el-switch
            v-model="v.block"
            active-text="ブロック"
            active-color="#FF0000"
            active-value="1"
            inactive-value="0"
            inactive-text=""
            @change="addBlock(v.id,v.block)"
    >
    </el-switch>

</div>


//axios で取得したデータ
for (var key in e.data.res.data){
e.data.res.data[key].block = String(e.data.res.data[key].block);
}