Failed to mount component: template or render function not defined using vue.js

Question

I'm learning vue. js .I'm trying to make simple form by using vue.js but I got above error while making a form. 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>

v-model="fiscal_year" requires a property called fiscal_year on your Vue instance/component. Have you defined such a property in your JavaScript code? You'll need to post that code for us to help you further. — skirtle
– skirtle, Commented Mar 6, 2020 at 9:46
there's nothing to be confused: you didn't defined that property and you obtain an error like in every programming language — MedaiP90
– MedaiP90, Commented Mar 6, 2020 at 10:49
@prabinasht You mentioned in your comments below that you put your code in a .vue file. Could you clarify whether the code above is in a .vue file or is it in a normal HTML file? To be clear, you shouldn't be creating a new Vue inside a .vue file, you should just be exporting the component definition. A .vue would then need to be built using Webpack. I strongly suggest you use the Vue CLI if you aren't already, it'll show you how it's done. The code as posted is missing a closing </div> tag before the <script>. Is this really the exact code you are trying to run? — skirtle
– skirtle, Commented Mar 7, 2020 at 3:18

tony19 · Accepted Answer · 2022-07-15 00:58:57Z

2

UPDATE

If you are using cli-vue : https://cli.vuejs.org/

Assume you put file in 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. If you want to use bootstrap you can use bootsrap-vue : https://bootstrap-vue.js.org/

But if you are using vue in html use this : 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 ?

About the question. <template> are used in component. You can replace it to <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 :

var app = new Vue({
  el: '#app',
  
  data: {
    fiscal_year: 2000,
    loading: false,
  },
  methods: {
    handleLogin(){
        console.log('handle login');
      this.loading = true;
    }
  }

edited Jul 15, 2022 at 0:58

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 6, 2020 at 10:11

anjarwidi83

4963 silver badges8 bronze badges

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

7 Comments

prabina sht Over a year ago

I got error message Failed to mount component: template or render function not defined. @widi83

anjarwidi83 Over a year ago

I see you didn't have </div> tag before <script>

anjarwidi83 Over a year ago

I try in https://codesandbox.io/s/romantic-bell-34b7x. I don't see error.

prabina sht Over a year ago

I made vue file instead of html file. I followed a documentation and made similar like that. I placed vue file inside components folder and when i run the file on browser , I got above error. @widi83

anjarwidi83 Over a year ago

Which documentation ? Vue file ? Does it mean you create vue project using cli-vue in cli.vuejs.org/guide/creating-a-project.html#vue-create

|

Boussadjra Brahim · Accepted Answer · 2020-03-06 17:38:33Z

2

In the script of your component or vue instance try to add fiscal_year :

export default{
     ...
      data(){
         return{
              fiscal_year:null,
               ....
            }
        }
      ....
}

or in a Vue instance :

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>

edited Mar 6, 2020 at 17:38

answered Mar 6, 2020 at 9:50

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

6 Comments

prabina sht Over a year ago

I got error message Failed to mount component: template or render function not defined. @Boussadjra Brahim

prabina sht Over a year ago

Same as like below answer. @Boussadjra Brahim

Boussadjra Brahim Over a year ago

it's not sufficient

prabina sht Over a year ago

I have changed the question . @Boussadjra Brahim

Boussadjra Brahim Over a year ago

it works fine just add the </div> before script check my edited answer

|

Collectives™ on Stack Overflow

Failed to mount component: template or render function not defined using vue.js

2 Answers 2

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related