Многоразовые Vue Компоненты - Как использовать реквизиты для определения v-для массива и пути для уникальных ответов Ax ios - PullRequest
Новая
       23

Многоразовые Vue Компоненты - Как использовать реквизиты для определения v-для массива и пути для уникальных ответов Ax ios

1 голос
/ 27 апреля 2020

Я использую Vue компоненты для нескольких входов с разными осями ios URL-адреса и ответы. Затем используйте v-for l oop для отображения ответа, который можно выбрать.

idea :

  • Вход 1> Ax ios GET user data
  • Вход 2> Ax ios GET color data
  • Вход 3> Ax ios GET модель data

et c, каждый ответ Ax ios может иметь различный массив ответов и объекты.

Я могу установить разные адреса Ax ios GET используя props, но как я могу использовать props для определения пути массива v-for и пути объекта?

пример изображения, показывающего необходимую связь между prop и v-for:

Image sample showing needed link between prop and v-for

Могу ли я использовать реквизиты для определения пути массива и объекта в f-vor l oop? В приведенном ниже примере кода мне нужно использовать опору из компонента, чтобы определить пути к массивам и объектам. примечание: я использую образец ответа топора ios для этой демонстрации. 

Vue.component("my-component", {
  template: `
<div style="position:absolute"><input :placeholder="this.input_placeholder" @keyup="if(input_value.length > 2 ){ search() }" v-on:blur="input_clear()" v-model="input_value" /><i v-if="loading_spinner" class="fas fa-spinner fa-pulse"></i><div class="supplier_select_popup" v-if="response_popup_show"><div v-for="data,i in response_array.bpi" v-on:click="response_select(i)">{{ data.code }}</div></div></div>`,
  props: {
    api_url: "",
    api_response_path: "",
    data_path: "",
  },
  data: function() {
    return {
      input_placeholder: "Search",
      input_value: "",
      selected_value: "",
      loading_spinner: false,
      response_popup_show: false,
      response_array: [],
    };
  },

  methods: {
    // Fetch Data
    search: function() {
      this.response_popup_show = false
      this.loading_spinner = true
      clearTimeout(this.myVar)
      this.myVar = setTimeout(
        function() {
          axios
            .get(
              this.api_url
            )
            .then((response) => {
              this.response_array = response.data
              console.log(this.response_array)
              this.response_popup_show = true
              this.loading_spinner = false
            })
            .catch((error) => {
              console.log(error)
              this.errored = true;
              this.response_popup_show = false
            })
            .finally(() => (this.loading = false))
        }.bind(this),
        1000
      );
    },
    // Response Select
    response_select: function(i) {
      this.input_value = [i]
      this.selected_value = [i]
      this.response_popup_show = false
    },
    // Response Clear
    input_clear: function() {
      var self = this;
      setTimeout(function() {
        self.response_popup_show = false
        self.loading_spinner = false
        if (self.selected_value.length != 0) {
          self.input_value = self.selected_value
        } else {
          self.input_value = ""
        }
      }, 100);
    }
  }
});

const App = new Vue({
  el: "#app",
  methods: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://kit.fontawesome.com/17cdac82ba.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-component class="clickable" api_url="https://api.coindesk.com/v1/bpi/currentprice.json" api_response_path="response_array.bpi" data_path="date.code">
  </my-component>
</div>

1 Ответ

0 голосов
/ 27 апреля 2020

Да, вы можете сделать это, передав свойство, которое вы хотите использовать как для ответа API, так и для каждого элемента данных, но я предпочитаю обобщать его, передавая функции "map", так что вы ничем не ограничены как вы хотите преобразовать данные: 

props: [
  'map_response',
  'map_data',
]

<div v-for="data, i in map_response(responseArray)">
  {{ map_data(data) }}
</div>

Вы передаете реквизиты так: 

<my-component
  class="clickable"
  api_url="http://api.example.com/stuff"
  :map_response="response => response.bpi"
  :map_data="data => data.code"
>
...