I have a bootstrap-vue code with a form. The form doesnt show up in the browser.
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap-Vue + CodeIgniter Example</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css">
</head>
<body>
<div id="app">
<b-container>
<b-row>
<b-col>
<h1>Bootstrap-Vue + CodeIgniter Example</h1>
<b-form @submit.prevent="submitForm">
<b-form-group label="Name" label-for="name-input">
<b-form-input id="name-input" v-model="form.name"></b-form-input>
</b-form-group>
<b-form-group label="Email" label-for="email-input">
<b-form-input id="email-input" type="email" v-model="form.email"></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</b-col>
</b-row>
</b-container>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
form: {
name: '',
email: ''
}
}
},
methods: {
submitForm() {
axios.post('<?php echo base_url('submit-form'); ?>', this.form)
.then(response => {
console.log(response.data);
// Handle successful response here
})
.catch(error => {
console.error(error);
// Handle error response here
});
}
}
});
</script>
</body>
</html>
I have generated the code from ChatGPT. Please help to fix the problem in my code so that the form renders properly. Please tell why the form is not shown in the browser.
