No http lib found to perform ajax request in VJSF - ajax

Question

I use VJSF to fill selects using the results from HTTP requests.
Then I faced a bug that is stressful.
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

Answer 1

It looks like VSJF requires users to specify an HTTP request library via the httpLib configuration option:
Install axios:
npm i -S axios
Update your VSJF configuration options to set axios as the httpLib:
import axios from 'axios'
const options = {
//...
httpLib: axios
}