Question

我想知道如何在nuxt应用程序中使用后端中的json数据填充树视图。我正在使用一个名为@ riophae / vue-treeselect的软件包

我想首先通过 id 的响应从/ api / events加载父数据。

然后，我想通过事件从/ api / markets链接中加载子数据。事件价值对应于市场价值。

/ api /事件

{
 "count": 80,
 "next": null,
 "previous": null,
 "results": [
{"id":103,"sport_id":"9","event_name":"Guilherme Clezar vs Uladzimir 
Ignatik","start_date":"12-11-19","status":"open","event_id":1273804660340017}]}

/ api / markets /

{
"count": 128,
"next": "http://localhost:8000/api/markets/?page=2",
"previous": null,
"results": [
{"id": 151,"market_id": 1273804670840017,"market_name": "Moneyline","status": 
"open","volume": 1107.5453,"event": 103}]}

我想在树形视图中显示此结构中的数据。

start_date
    event_name
      market_name

如何使用软件包文档中的以下模板将数据加载到树形视图中？我在文档中看不到任何有关在axios上使用tree-select的明确信息。

<template>
<div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    // register the component
    components: { Treeselect },
    data() {
    return {
        // define the default value
        value: null,
        // define options
        options: [ {
        id: 'a',
        label: 'a',
        children: [ {
            id: 'aa',
            label: 'aa',
        }, {
            id: 'ab',
            label: 'ab',
        } ],
        }, {
        id: 'b',
        label: 'b',
        }, {
        id: 'c',
        label: 'c',
        } ],
    }
    },
}
</script>

使用Axios和Nuxt用Json数据填充treeselect组件

0 个答案: