Question

我可以显示通过道具传递给子组件的数据数组中的最后一个元素，但是我需要显示该数组中的所有数据。您可以通过以下链接查看应用程序的运行情况：View Vue.js app here

我有一个动态的父组件：

<credential_details
  xs12
  class="no_background"
  id="credentials"
  v-for="(item, index) in components"
  :index="index"
  :key="'fourth' + index "
  :seller_id="seller_id"
  :selected_marketplace="selected_marketplace"
  :token="token"
  >
</credential_details>

这是我的data父级函数：

 export default {
  data: function() {
    return {
      seller_id: "",
      selected_marketplace: null,
      token: "",
      components: [],
    };
  },

我正在通过上级组件中的axios检索数据，

let self = this;    
axios.get(url + '/return_credentials').then(response => {
  response.data.forEach(function(element){
    self.seller_id = element.seller_id;
    self.selected_marketplace = element.marketplace;      
    self.token = element.auth_token;
    self.components.push(1);
  });
  if(self.seller_id == ""){
    self.show_cancel_button = false;
  }
  self.show_cancel_button;
});

然后将其显示在子组件中，如下所示：

props: ["seller_id", "selected_marketplace", "token"],

然后在这样的代码中：

<v-text-field
  required
  :error-messages="sellerIdErrors"
  color="indigo"
  label="Amazon Seller Id"
  v-model="seller_id"
  prepend-icon="person"
  @input="$v.seller_id.$touch()"
  @blur="$v.seller_id.$touch()"
></v-text-field>

这很好，但是它只显示数组中的最后一个元素，如何显示所有数据？

Vue.js将一系列道具传递给动态组件

0 个答案: