无法挂载组件：模板或渲染函数未使用 vue.js 定义答案

【问题标题】：Failed to mount component: template or render function not defined using vue.js无法挂载组件：模板或渲染函数未使用 vue.js 定义
【发布时间】：2020-06-19 00:41:07
【问题描述】：

我正在学习 vue。我正在尝试使用 vue.js 制作简单的表单，但在制作表单时出现上述错误。我试过但无法解决问题。请帮帮我。


<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" 在您的 Vue 实例/组件上需要一个名为 fiscal_year 的属性。您是否在 JavaScript 代码中定义了这样的属性？您需要发布该代码以便我们进一步帮助您。
不，我没有定义这样的属性。我很困惑@skirtle
没什么好混淆的：你没有定义那个属性，你会得到一个错误，就像在每一种编程语言中一样
我更新了问题。请帮我。 @裙子
@prabinasht 您在下面的 cmets 中提到您将代码放在 .vue 文件中。您能否澄清一下上面的代码是在.vue 文件中还是在普通的HTML 文件中？需要明确的是，您不应该在 .vue 文件中创建 new Vue，而应该只导出组件定义。然后需要使用 Webpack 构建 .vue。如果您还没有使用 Vue CLI，我强烈建议您使用它，它会告诉您它是如何完成的。发布的代码在<script> 之前缺少关闭</div> 标记。这真的是您要运行的确切代码吗？

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

在您的组件或 vue 实例的脚本中尝试添加 fiscal_year ：

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

或在 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>

【讨论】：

我收到错误消息无法安装组件：未定义模板或渲染函数。 @Boussadjra Brahim
与下面的答案相同。 @Boussadjra Brahim
还不够
我已经改变了问题。 @Boussadjra Brahim
它工作正常只需在脚本检查我编辑的答案之前添加</div>

【解决方案2】：

更新

如果您使用的是 cli-vue：https://cli.vuejs.org/

假设你把文件放在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>

不要在 Vue 项目中使用 jquery。如果你想使用引导程序，你可以使用bootsrap-vue：https://bootstrap-vue.js.org/

但如果您在 html 中使用 vue，请使用：https://vuejs.org/v2/guide/

-- 上一个--

首先，你读过https://vuejs.org/v2/guide/和Vue Lesson on Scrimba的vuejs介绍了吗？

关于问题。 <template> 用于组件中。您可以将其替换为<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>

然后你在<script>标签中创建vue实例：

var app = new Vue({
  el: '#app',

  data: {
    fiscal_year: 2000,
    loading: false,
  },
  methods: {
    handleLogin(){
        console.log('handle login');
      this.loading = true;
    }
  }

【讨论】：

我收到错误消息无法安装组件：未定义模板或渲染函数。 @widi83
我看到你在之前没有
标签

我试试https://codesandbox.io/s/romantic-bell-34b7x。我没有看到错误。

我制作了 vue 文件而不是 html 文件。我按照文档进行了类似的操作。我将 vue 文件放在 components 文件夹中，当我在浏览器上运行该文件时，出现上述错误。 @widi83

哪些文档？ vue 文件？是不是意味着你在cli.vuejs.org/guide/creating-a-project.html#vue-create中使用cli-vue创建vue项目@