我有一个带有表单的 bootstrap-vue 代码。表单不会显示在浏览器中。
我的代码：
<!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>
我已经从 ChatGPT 生成了代码。 请帮助解决我的代码中的问题，以便正确呈现表单。 请告诉为什么表格没有在浏览器中显示。
错误在字符串插值中
'<?php echo base_url('submit-form'); ?>'
你应该使用不同类型的报价
'<?php echo base_url("submit-form"); ?>'
或
"<?php echo base_url('submit-form'); ?>"
或
`<?php echo base_url('submit-form'); ?>`
<!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>