मैं जानना चाहता था कि मैं पोकेमॉन डेटा कैसे एक्सेस कर सकता हूं जो (api.vue) घटक से एपीआई की प्रतिक्रिया है, इसे api.vue से app.vue तक एक्सेस करें और डेटा को मेरी पसंद सरणी में लोड करें। I' '<Api/>' का उपयोग करके डेटा तक पहुंचने का प्रयास किया है, लेकिन अलग-अलग घटक से डेटा प्राप्त करने का एक बेहतर तरीका है और इसे मेरे ऐप में उदाहरण के लिए एक सरणी में लोड करना है। मेरे पास विकल्प सरणी है। धन्यवाद

एपीआई.वीयूई

 <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>

एपीपी.वीयूई

<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>
0
user9551058 9 अक्टूबर 2018, 08:19

2 जवाब

सबसे बढ़िया उत्तर

डेटा लौटाएं pokemon:[], एपीआई वू घटक के अंदर ऐप वीयू आयात करें, फिर डेटा को एचटीएमएल ऐप वीयू घटक पर प्रॉप्स के रूप में पास करें ताकि आप इसे नीचे दिए गए कोड की तरह ऐप वीयू घटक पर एक्सेस कर सकें।

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>

ऐप.व्यू

<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>
0
user-9725874 9 अक्टूबर 2018, 09:34

एक बार जब आपको डेटा साझा करने और बदलने के लिए घटकों की आवश्यकता शुरू हो जाती है, तो मैं एक राज्य प्रबंधन पुस्तकालय को देखूंगा, यह वास्तव में आपको सत्य के एक स्रोत के साथ आवेदन में सभी राज्य का प्रबंधन करने में मदद करेगा। नहीं तो मामला बिगड़ना शुरू हो सकता है। ]

Redux पैटर्न के आधार पर Vue के पास इसके लिए एक बेहतरीन लाइब्रेरी है

https://vuex.vuejs.org/

मैं इसकी अत्यधिक अनुशंसा करता हूं, आशा है कि यह मदद करता है :)

0
sjdm 9 अक्टूबर 2018, 08:25