Как получить доступ к данным из отдельного компонента, как? - PullRequest
Новая
       15

Как получить доступ к данным из отдельного компонента, как?

0 голосов
/ 09 октября 2018

Я хотел знать, как я могу получить доступ к данным покемонов, которые являются ответом API от компонента (api.vue), получить доступ к ним от api.vue до app.vue и загрузить данные в мой массив выбора. Я пытался получить доступданные, использующие '<Api/>', но есть ли лучший способ получить данные из отдельного компонента, проанализировать их и загрузить в массив, например, в моем app.vue У меня есть выбор варианта.Спасибо

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 

<code><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) }}
импорт VueQueryBuilder из "vue-query-builder";импортировать HelloWorld из "./components/HelloWorld";импортировать Api из "./components/Api";экспорт по умолчанию {name: "App", компоненты: {VueQueryBuilder, HelloWorld, Api}, data () {return {rules: [{type: "select", id: "vegetable", метка: "Question", варианты выбора: [{label: "Apple", значение: "apple"}, {label: "Banana", value: "banana"}]}, {type: "radio", id: "fruit", label: "Fruit", выбор: [{label: "Apple", значение: "apple"}, {label: "Banana", значение: "banana"}]}], запрос: {"logicOperator": "All", "children": [{"type": "query-builder-group", "query": {"logicOperator": "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 "}}]}}]}};}};

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Возврат данных pokemon:[], импорт приложения vue внутри компонента api vue, затем передача данных в качестве реквизитов в компонент html app vue, чтобы вы могли получить к ним доступ в компоненте app 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 

<code><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) }}

{{poke.id}}

// рендеринг идентификатора данных покемона импортVueQueryBuilder от "vue-query-builder";импортировать HelloWorld из "./components/HelloWorld";импортировать Api из "./components/Api";экспорт по умолчанию {name: "App", компоненты: {VueQueryBuilder, HelloWorld, Api}, реквизиты: ['poke'], // новая строка данных кода из api.vue data () {return {rules: [{type:"select", id: "vegetable", метка: "Question", варианты: [{label: "Apple", значение: "apple"}, {label: "Banana", значение: "banana"}]}, {тип: "radio", id: "fruit", метка: "Fruit", выбор: [{label: "Apple", значение: "apple"}, {label: "Banana", значение: "banana"}]}], query: {"logicOperator": "All", "children": [{"type": "query-builder-group", "query": {"logicOperator": "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"}}]}}]}}};}};
0 голосов
/ 09 октября 2018

Как только вы начнете нуждаться в компонентах для обмена и изменения данных, я загляну в библиотеку управления состояниями, это действительно поможет вам управлять всеми состояниями в приложении с одним источником правды.В противном случае все может стать грязным.]

В Vue есть отличная библиотека для этого на основе шаблона редукса

https://vuex.vuejs.org/

Я очень рекомендую это, надеюсь, это поможет:)

...