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
there's nothing to be confused: you didn't defined that property and you obtain an error like in every programming language — MedaiP90
@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

widi83 widi83 · Accepted Answer · 2020-03-06T10:11:56

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://vuejs.org/v2/guide/

-- Previous --

First, have you read vuejs introduction in https://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;
    }
  }

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

2 Answers