Question

我想做的是将道具从父母传递给孩子，然后通过将事件发回给父母来更新这些道具。当这种往返发生时，我希望子组件得以更新。现在不是。

我验证了父级正在更新。但是由于某种原因，子组件没有被更新，我不确定为什么吗？

这是我的父组件

<template>
  <v-app>
    <credential_instructions class="no_background"></credential_instructions>
    <credential_details
      :amazonCredsArray="amazonCredsArray[0]"
      @addComponent="amazonCredsArray[0].push($event)" 
      @removeComponent="amazonCredsArray[0].pop()"
      xs12
      class="no_background"
      >
    </credential_details>
  </v-app>  
</template>

<script>
/*global top*/

import {dataShare} from '../packs/application.js';
import credential_instructions from '../components/credential_instructions.vue';
import credential_details from '../components/credential_details.vue';
import axios from 'axios';

var url = "https://bc-only-rates-trimakas.c9users.io";

export default {
  data: function() {
    return {
      amazonCredsArray: [],
      components: [],
    };
  },
  components: {
    credential_instructions,
    credential_details
  },
  created() {
    // let self = this;
    dataShare.$on('addComponent', (data) => {
      console.log("how long is the array before? " + this.amazonCredsArray.length )
      if(this.amazonCredsArray.length == 1){
        this.amazonCredsArray.push(data);
      }
      else {
        this.amazonCredsArray[0].push(data);
      }
      console.log("what's the length of the array at the end? " + this.amazonCredsArray.length)
    });
    dataShare.$on('removeComponent', (data) => {
      this.amazonCredsArray[0].pop();
    });
    axios.get(url + "/return_amazon_credentials").then(response => {
      this.amazonCredsArray.push(response.data);
    });
  }
};  

</script>

然后这是事件发回给父级的孩子：

<v-flex mb-3 class="fullLayoutorHalf(amazonCredsArray)">
   <v-btn fab dark large mb-3 color="green" @click="addCounter()">
      <v-icon dark>add</v-icon>
   </v-btn>
      <h1 class="title oswald my_dark_purple_text">Add additional marketplaces</h1>
</v-flex>

最后，这是将事件发送回父级的方法

addCounter() {
  this.counter++;
  dataShare.$emit('addComponent', this.counter);
},

我在哪里迷路了？

编辑：哦，我刚刚发现了这个。我认为这可能是解决方案。 Caveat for updating a parent array

Vue.js-完整的父项道具到子事件和返回

0 个答案: