ajaxvue.jsvuetify.jshttplib

No http lib found to perform ajax request in VJSF


I use VJSF to fill selects using the results from HTTP requests. Then I faced a bug that is stressful. enter image description here Following is my code.

<template>
  <v-app id="app">
    <v-container>
      <p>valid={{valid}}</p>
      <v-form ref="form" v-model="valid">
        <v-jsf v-model="model" :schema="schema" :options="options" @input="logEvent('input', $event)" @change="logEvent('change', $event)" />
      </v-form>
      <v-layout row class="mt-2">
        <v-spacer></v-spacer>
        <v-btn color="primary" @click="$refs.form.validate()">Validate</v-btn>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script>

import VJsf from '@koumoul/vjsf/lib/VJsf.js'
import '@koumoul/vjsf/lib/VJsf.css'
import '@koumoul/vjsf/lib/deps/third-party.js'

const model = {
    selectAjaxString: 'https://koumoul.com/s/data-fair/api/v1/datasets/gendarmeries-france-metropolitaine'
}

const options =  {
    context: {
        owner: {
            type: 'organization',
            id: '5a5dc47163ebd4a6f438589b'
        }
    },
    idPrefix: 'example-select-http-'
}

const schema = {
    type: 'object',
    properties: {
        selectAjaxString: {
            type: 'string',
            title: 'I\'m a string selected from results of an HTTP request',
            'x-fromUrl': 'https://koumoul.com/s/data-fair/api/v1/datasets?status=finalized&select=title&owner={context.owner.type}:{context.owner.id}',
            'x-itemsProp': 'results',
            'x-itemTitle': 'title',
            'x-itemKey': 'href'
        }
    }
}

export default {
  name: 'App',
  components: { VJsf },
  data: () => ({
    model,
    options,
    schema,
    valid: false
  }),
  methods: {
    logEvent(key, $event) {
      console.log("vjsf event", key, $event);
    }
  }
};
</script>

What is the reason? Why I can not perform ajax request? I followed sample in https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/examples#select-http


Solution

  • It looks like VSJF requires users to specify an HTTP request library via the httpLib configuration option:

    1. Install axios:

      npm i -S axios
      
    2. Update your VSJF configuration options to set axios as the httpLib:

      import axios from 'axios'
      
      const options = {
          //...
          httpLib: axios
      }