Vue js 从单独的组件访问数据，如何？

Question

I wanted to know how can I access pokemon data which is the response from the API from (api.vue) component, access it from api.vue to app.vue and load the data to my choices array.I've tried accessing the data using '<Api/>' but is there a better way on getting the data from separate component parse it and load it to an array for example in my app.vue I have choices array. Thank You

API.VUE

 <template>
  <div class="hello">
    {{ pokemon }}
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data () {
    return {
      pokemon: {}
    }
  },
  created () {
    axios.get('https://pokeapi.co/api/v2/pokedex/kanto/')
      .then(response => {
        console.log(response)
        this.pokemon = response.data
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>

<style scoped></style>

APP.VUE

<template>
  <div id="app">
    <vue-query-builder
      :rules="rules"
      v-model="query">
    </vue-query-builder>
    <Api/>

    <p>Generated output : {{questions}}</p>

    <pre>{{ JSON.stringify(this.query, null, 2) }}</pre>
  </div>
</template>

<script>
import VueQueryBuilder from "vue-query-builder";
import HelloWorld from "./components/HelloWorld";
import Api from "./components/Api";

export default {
  name: "App",
  components: {
    VueQueryBuilder,
    HelloWorld,
    Api 
  },

  data() {
    return {
      rules: [
        {
          type: "select",
          id: "vegetable",
          label: "Question",
          choices: [
            { label: "Apple", value: "apple" },
            { label: "Banana", value: "banana" }
          ]
        },
        {
          type: "radio",
          id: "fruit",
          label: "Fruit",
          choices: [
            { label: "Apple", value: "apple" },
            { label: "Banana", value: "banana" }
          ]
        }
      ],

       query: {
        "logicalOperator": "All",
        "children": [
          {
            "type": "query-builder-group",
            "query": {
              "logicalOperator": "Any",
              "children": [
                {
                  "type": "query-builder-rule",
                  "query": {
                    "rule": "vegetable",
                    "selectedOperator": "contains",
                    "selectedOperand": "Vegetable",
                    "value": null
                  }
                },
                {
                  "type": "query-builder-rule",
                  "query": {
                    "rule": "fruit",
                    "selectedOperand": "Fruit",
                    "value": "banana"
                  }
                }
              ]
            }
          }
        ]
      }
    };
  }
};
</script>

Answer 1

Once you start needing components to share and mutate data I would look into a state management library, this will really help you manage all the state in the application, with one source of truth. Otherwise things can start getting messy. ]

Vue has a great library for this based of the redux pattern

https://vuex.vuejs.org/

I would highly recommend it, Hope that helps :)

Answer 2

Return the data pokemon:[] , import app vue inside api vue component, then pass the data as props on the html app vue component so you can access it on app vue component like the code below.

API.vue

<template>
  <app>
     v-for="poke in pokemon" 
     :key="poke.id"
     :poke="poke">
  </app>

  <div class="hello">
    {{ pokemon }}
  </div>
</template>

<script>
import axios from 'axios'
import APP from './App.vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
      pokemon: []
    }
  },

  components: {
      'app': APP
  },

  created () {
    axios.get('https://pokeapi.co/api/v2/pokedex/kanto/')
      .then(response => {
        console.log(response)
        this.pokemon = response.data
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>

<style scoped></style>

App.vue

<template>
  <div id="app">
    <vue-query-builder
      :rules="rules"
      v-model="query">
    </vue-query-builder>
    <Api/>

    <p>Generated output : {{questions}}</p>

    <pre>{{ JSON.stringify(this.query, null, 2) }}</pre>

     <p>{{poke.id}}</p> // render pokemon data id
  </div>
</template>

<script>
import VueQueryBuilder from "vue-query-builder";
import HelloWorld from "./components/HelloWorld";
import Api from "./components/Api";

export default {
  name: "App",
  components: {
    VueQueryBuilder,
    HelloWorld,
    Api 
  },

  props: ['poke'], // new line of code data from api.vue

  data() {
    return {
      rules: [
        {
          type: "select",
          id: "vegetable",
          label: "Question",
          choices: [
            { label: "Apple", value: "apple" },
            { label: "Banana", value: "banana" }
          ]
        },
        {
          type: "radio",
          id: "fruit",
          label: "Fruit",
          choices: [
            { label: "Apple", value: "apple" },
            { label: "Banana", value: "banana" }
          ]
        }
      ],

       query: {
        "logicalOperator": "All",
        "children": [
          {
            "type": "query-builder-group",
            "query": {
              "logicalOperator": "Any",
              "children": [
                {
                  "type": "query-builder-rule",
                  "query": {
                    "rule": "vegetable",
                    "selectedOperator": "contains",
                    "selectedOperand": "Vegetable",
                    "value": null
                  }
                },
                {
                  "type": "query-builder-rule",
                  "query": {
                    "rule": "fruit",
                    "selectedOperand": "Fruit",
                    "value": "banana"
                  }
                }
              ]
            }
          }
        ]
      }
    };
  }
};
</script>