如何使用 Vue-Form-Generator 正確瀏覽圖像？ （因為它對我不起作用）

Question

我是一名新的全棧開發學生，我想使用 Vue-Form-Generator 生成帶有輸入字段的表單，並且我想瀏覽圖像。 我的所有領域都有效，除了圖像瀏覽領域。 它沒有顯示在我的頁面上。 我嘗試了很多東西，但我最后的希望是有人知道它。

我的 Vue.js 代碼：

  <div class="page">
  <h2>Ajout d'un chercheur</h2>
    <div class="form">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
    </div>
  </div>
</template>

<script>

export default {
    data () {
    return {
      model: {
        avatar: null,
        prenom: 'Prénom',
        nom: 'Nom',
        url: 'www.son_site.fr'
      },
      schema: {
        fields: [
          {
            type: "image",
            label: "Photo",
            model: "avatar",
            placeholder: "Photographie du chercheur",
            browse: true,
            required: true,
            featured:true,
          },
          {
            type: 'input',
            inputType: 'text',
            label: 'Prénom',
            model: 'prenom',
            placeholder: 'Prénom',
            featured: true,
            required: true
          },
          {
            type: 'input',
            inputType: 'text',
            label: 'Name',
            model: 'nom',
            placeholder: 'Nom',
            featured: true,
            required: true
          },
          {
            type: 'input',
            inputType: 'text',
            label: 'URL / Site Web',
            model: 'url',
            placeholder: 'www.son_site.fr',
            featured: true,
            required: true
          },
          {
            type: 'submit',
            onSubmit(model) {
              console.log(model);
            },
            label: '',
            buttonText: "Ajouter",
            validateBeforeSubmit: true
          },
        ]
      },
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true,
        validateAsync: true
      }
    }
  }
}
    
</script>

它顯示的內容：我的頁面除了圖像瀏覽之外的所有內容

控制台錯誤

Answer 1

鑒於您遇到的控制台錯誤，看起來您正在使用 Vue-Form-Generator 的“核心”而不是“完整”版本。

請參閱此處的文檔以了解如何使用包含所有字段類型的完整版本。 圖像字段類型不在核心版本中。

// the "full" way
<script>
  import VueFormGenerator from "vue-form-generator";
  import "vue-form-generator/dist/vfg.css";  // optional full css additions
</script>

// the "core" way
<script>
  import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
  import "vue-form-generator/dist/vfg-core.css";  // optional core css additions
</script>