[Vuejs]-Failed to mount component: template or render function not defined using vue.js

by

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;
    }
  }
👤anjarwidi83

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>
👤Boussadjra Brahim

Leave a comment