Vue js模板標記未呈現（它在屏幕上顯示為空白）

Question

我正在嘗試從site.vue-wizard-form實現基本形式，但是temeplate無法正確渲染，所以屏幕上沒有任何顯示，所以請幫助我。 和表格tab2我也可以在同一頁面中使用文本框。 以及如何驗證每個標簽。 請提供一些信息，我是vuejs的新手。

下面添加了輸出屏幕截圖，因此請幫助我解決此錯誤。 控制台中沒有錯誤。 我知道這是一個愚蠢的錯誤，但我無法識別該錯誤。

<html>
<head>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<link rel="stylesheet" href="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.min.css">
<script src="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.js"></script>

<script>

Vue.use(VueFormWizard); 
</script>
</head>
<body>
<div id="app">
<template>
  <form-wizard @on-complete="onComplete" shape="tab" color="#20a0ff" error-color="#ff4949">
    <tab-content title="Personal details" icon="ti-user" :before-change="validateFirstStep">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules" ref="ruleForm">
        <el-form-item label="Approved by" prop="user">
          <el-input v-model="formInline.user" placeholder="Approved by"></el-input>
        </el-form-item>
        <el-form-item label="Activity zone" prop="region">
          <el-select v-model="formInline.region" placeholder="Activity zone">
            <el-option label="Zone one" value="shanghai"></el-option>
            <el-option label="Zone two" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

    </tab-content>
    <tab-content title="Additional Info" icon="ti-settings">
      Second tab
    </tab-content>
    <tab-content title="Last step" icon="ti-check">
      Yuhuuu! This seems pretty damn simple
    </tab-content>

    <el-button type="primary" slot="prev">Back</el-button>
    <el-button type="primary" slot="next">Next</el-button>
    <el-button type="primary" slot="finish">Finish</el-button>
  </form-wizard>

</template>
</div>

</body>
</html>

<script>

 //Vue.use(VueFormWizard);
 const app= new Vue({
   el: '#app',
     data() {
       return {
         formInline: {
           user: '',
           region: ''
         },
         rules: {
           user: [{
             required: true,
             message: 'Please input Activity name',
             trigger: 'blur'
           }, {
             min: 3,
             max: 5,
             message: 'Length should be 3 to 5',
             trigger: 'blur'
           }],
           region: [{
             required: true,
             message: 'Please select Activity zone',
             trigger: 'change'
           }],
         }
        }
       },
       methods: {
         onComplete: function() {
           alert('Yay. Done!');
         },
         validateFirstStep() {
           return new Promise((resolve, reject) => {
             this.$refs.ruleForm.validate((valid) => {
               resolve(valid);
             });
           })

         }
       }
  })
</script>

Answer 1

您忘記了element-ui js和CSS

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

演示

Vue js模板標記未呈現（它在屏幕上顯示為空白）

問題描述

1 個解決方案

解決方案1
1 已采納 2019-07-23 08:05:42

Vue js模板標記未呈現（它在屏幕上顯示為空白）

問題描述

1 個解決方案

解決方案1 1 已采納 2019-07-23 08:05:42

解決方案1
1 已采納 2019-07-23 08:05:42