[英]Failed to mount component: template or render function not defined using vue.js
I'm learning vue.我正在学习vue。 js .I'm trying to make simple form by using vue.js but I got above error while making a form.我正在尝试使用 vue.js 制作简单的表单,但在制作表单时出现上述错误。 I tried but unable to fix the problem.我试过但无法解决问题。 Please help me.请帮我。
<div id="app">
<form name="form" @submit.prevent="handleLogin">
<input
v-model="fiscal_year"
v-validate="'required'"
type="text"
class="form-control"
name="fiscal_year"
/>
<button class="btn btn-primary btn-block" :disabled="loading">
<span v-show="loading" class="spinner-border spinner-border-sm"></span>
<span>Submit</span>
</button>
</form>
<script>
var app = new Vue({
el: '#app',
data: {
fiscal_year: 2000,
loading: false,
},
mount:function(){},
methods: {
handleLogin(){
console.log('handle login');
this.loading = true;
}
}
})
</script>
In the script of your component or vue instance try to add fiscal_year
:在您的组件或 vue 实例的脚本中尝试添加fiscal_year
:
export default{
...
data(){
return{
fiscal_year:null,
....
}
}
....
}
or in a Vue instance :或在 Vue 实例中:
new Vue ({
el:"#app",
data(){
return{
fiscal_year:null,
....
}
}
...
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <form name="form" @submit.prevent="handleLogin"> <input v-model="fiscal_year" v-validate="'required'" type="text" class="form-control" name="fiscal_year" /> <button class="btn btn-primary btn-block" :disabled="loading"> <span v-show="loading" class="spinner-border spinner-border-sm"></span> <span>Submit</span> </button> </form> </div> <script> var app = new Vue({ el: '#app', data: { fiscal_year: 2000, loading: false, }, mount:function(){}, methods: { handleLogin(){ console.log('handle login'); this.loading = true; } } }) </script>
UPDATE更新
If you are using cli-vue : https://cli.vuejs.org/如果您使用的是 cli-vue: https ://cli.vuejs.org/
Assume you put file in App.vue
:假设您将文件放在App.vue
中:
<template>
<div id="app">
<h1>hello</h1>
<form name="form" @submit.prevent="handleLogin">
<input v-model="fiscal_year" type="text" class="form-control" name="fiscal_year">
<button class="btn btn-primary btn-block" :disabled="loading">
<span v-show="loading" class="spinner-border spinner-border-sm"></span>
<span>Submit</span>
</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
fiscal_year: 2000,
loading: false
};
},
methods: {
handleLogin() {
console.log("handle login");
this.loading = true;
}
}
};
</script>
Dont use jquery in Vue project.不要在 Vue 项目中使用 jquery。 If you want to use bootstrap you can use bootsrap-vue
: https://bootstrap-vue.js.org/如果你想使用 bootstrap,你可以使用bootsrap-vue
: https ://bootstrap-vue.js.org/
But if you are using vue in html use this : https://v2.vuejs.org/v2/guide/但是,如果您在 html 中使用 vue,请使用: https ://v2.vuejs.org/v2/guide/
-- Previous -- --上一个--
First, have you read vuejs introduction in https://v2.vuejs.org/v2/guide/ and Vue Lesson on Scrimba ?首先,您是否阅读了https://v2.vuejs.org/v2/guide/中的 vuejs 介绍和Scrimba 上的 Vue 课程?
About the question.关于问题。 <template>
are used in component. <template>
在组件中使用。 You can replace it to <div id="app">
:您可以将其替换为<div id="app">
:
<div id="app"> <!-- Replace <template> with <div> -->
<div class="col-md-12">
<form name="form" @submit.prevent="handleLogin">
<div class="form-group col-md-6">
<label for="fiscal_year">Fiscal Year</label>
<input
v-model="fiscal_year"
v-validate="'required'"
type="text"
class="form-control"
name="fiscal_year"
/>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" :disabled="loading">
<span v-show="loading" class="spinner-border spinner-border-sm"></span>
<span>Submit</span>
</button>
</div>
</form>
</div>
</div>
Then you create vue instance in the <script>
tag :然后在<script>
标签中创建 vue 实例:
var app = new Vue({
el: '#app',
data: {
fiscal_year: 2000,
loading: false,
},
methods: {
handleLogin(){
console.log('handle login');
this.loading = true;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.