API.VUE

Question

我想知道如何才能从(api.vue)组件中获取来自API的响应的神奇宝贝数据，如何从api.vue到app.vue中访问它并将数据加载到我的选择数组中我已经尝试过使用'<Api/>'访问数据，但是有一种更好的方法来从单独的组件获取数据，然后将其解析并将其加载到数组中，例如在我的app.vue中，我有choices数组。谢谢

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

一旦您开始需要用于共享和变异数据的组件，我将研究状态管理库，这将真正帮助您使用一个真实的来源来管理应用程序中的所有状态。否则事情会开始变得混乱。 ]

Vue基于redux模式为此提供了一个很棒的库

https://vuex.vuejs.org/

我强烈推荐它，希望能有所帮助：）

Answer 2

返回数据pokemon:[]，将应用程序vue导入api vue组件中，然后将数据作为props传递给html应用程序vue组件，以便您可以像下面的代码那样在应用程序vue组件上访问它。

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>

Vue JS从单独的组件访问数据，怎么办？

API.VUE

APP.VUE

2 个答案: