How can i get the selected value in checkbox from database in component Vue.js with Laravel?

Question

How can I get the selected value in the checkbox from the database in a Vue.js component with Laravel? This component from the edit.vue component, how can I fix it? And get the checkbox checked or not? The second question is whether the data is removed from the component when I refresh. Do I mean the data received from the database? Why?

<template>
    <div>
        <div class="card">
            <div class="card-header">Edit Post</div>
            <div class="card-body">
                    <form @submit.prevent="submit_form">
            <div class="form-group mb-3">
                <label for="" class="mb-3"> Post Title </label>
                <input
                    type="text"
                    v-model="fields.title"
                    class="form-control"
                />
                <div class="alert alert-danger" v-if="errors && errors.title">
                    {{ errors.title[0] }}
                </div>
            </div>

            <div class="form-group mb-3">
                <label for="" class="mb-3">Body </label>
                <textarea
                    rows="10"
                    v-model="fields.body"
                    class="form-control"
                ></textarea>
                <div class="alert alert-danger" v-if="errors && errors.body">
                    {{ errors.body[0] }}
                </div>
            </div>
            <div class="form-group mb-3">
                <label for="" class="mb-3">Category</label>
                <select class="form-control" v-model="fields.category_id">
                    <option value="">Please Choose Categories</option>
                    <option
                        v-for="category in categories"
                        :value="category.id"
                        :key="category.id"
                    >
                        {{ category.name }}
                    </option>
                </select>
                <div
                    class="alert alert-danger"
                    v-if="errors && errors.category_id"
                >
                    {{ errors.category_id[0] }}
                </div>
            </div>
             <div class="form-check">
                <input
                    class="form-check-input"
                    type="checkbox"
                    v-model="fields.published"
                    id="flexCheckChecked"
                />
                <label class="form-check-label" for="flexCheckChecked">
                  Published
                </label>
            </div>

            <input
                type="submit"
                :disabled="form_submiting"
                :value="form_submiting ? 'Saving Post...' : 'Save'"
                class="btn btn-primary"
            />
        </form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            categories: {},
            fields: {
                title: "",
                body: "",
                category_id: "",
                published: "",
            },
            errors: {},
            form_submiting: false,
        };
    },
    mounted() {
          axios.get("/api/get-categories-data").then((response) => {
            this.categories = response.data.data;
        });
        axios.get("/api/posts/" + this.$route.params.id).then((response) => {
            this.fields = response.data.data;
        });
    },
    methods: {

        submit_form() {
            this.form_submiting = true;
            axios
                .put("/api/posts/" + this.$route.params.id, this.fields)
                .then((response) => {
                    swal({
                        title: "Post Edited Successfully",
                        icon: "success",
                        button: "Close",
                    });
                    this.$router.push("/");
                    this.form_submiting = false;
                })
                .catch((error) => {
                    if (error.response.status === 422) {
                        swal({
                            title: "There is an error",
                            icon: "error",
                            button: "Close",
                        });
                        this.errors = error.response.data.errors;
                        this.form_submiting = false;
                    }
                });
        },
    },
};
</script>

power-cut · Accepted Answer · 2022-05-01 06:32:37Z

1

You can use checked attribute in checkbox.

<input
 id="flexCheckChecked"
 class="form-check-input"
 type="checkbox"
 :checked="fields.published"
 @change="handleChange($event)"
/>

https://v2.vuejs.org/v2/guide/forms.html#Checkbox

answered May 1, 2022 at 6:32

power-cut

1,5681 gold badge21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i get the selected value in checkbox from database in component Vue.js with Laravel?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related