javascript - Vue.js - 子事件和返回的完整循环父道具
问题描述
我想要做的是将道具从父母传递给孩子,然后通过向父母发送事件来更新这些道具。当此往返发生时,我希望更新子组件。现在不是。
我验证了父级正在更新。但由于某种原因,子组件没有更新,我不确定为什么?
这是我的父组件
<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);
},
我在哪里误入歧途?
编辑:哦,哇,我刚刚发现了这个..我认为这可能是解决方案。更新父数组的注意事项
解决方案
推荐阅读
- c - 如何在 C 中将字符串与不确定的用户输入分开?
- android - 如何将动态阈值(转换为黑白)应用于颤动的灰度图像?
- react-native - 如何让 BackHandler 工作?
- java - 在 ElasticSearch 7.4 java 客户端的 geoShapeQuery 中使用 geojson 多边形
- javascript - 词法环境/编译在这里如何工作
- python - 创建类时有没有办法再次计算类变量?
- javascript - Vue this.$http.delete() 仅返回 500 内部服务器
- html - CSS Precedence Oddity - “#id tag” > “#tagId” 为什么?
- python - 如何使用 os 将文件保存到新文件夹?
- rust - 如何调用具有泛型类型的结构的关联函数?