[Vuejs]-Change radio button value to 'checked' (Vue.js, Vuetify)

by

0👍

So, radio buttons works as it should to https://developer.mozilla.org/ru/docs/Web/HTML/Element/Input/radio.

If you need to send a request like pos_r_3: Radio 3, you have to do some transformation on it. I’d suggest the code like:

export default Vue.extend({
name: 'Test',
data: function () {
    return {
        checked: '',
        group: [
            {id: 'pos_r_1', text: 'Radio 1'},
            {id: 'pos_r_2', text: 'Radio 2'},
            {id: 'pos_r_3', text: 'Radio 3'},
            {id: 'pos_r_4', text: 'Radio 4'},
        ],
    }
},
onSubmit() {
        this.loading = true
        const form = document.querySelector('form');

        const data = new FormData(form); 
        for (let i = 0; i < this.group.length; i++){
            const currentGroup = this.group[i];
            data.set(currentGroup.id, currentGroup.text === this.checked ? 'Checked' : '');
        }

        let currentObj = this;
        let url = '/report/form/store';
        axios({
            url,
            method: 'post',
            data,
        }) .then(function (response) {
            currentObj.output = response.data;
        }) .catch( (error) => {
            if (error.response && error.response.status === 422){
                this.errors = error.response.data.errors;
            }
        });

    }
}

Leave a comment