javascript - 兄弟组件Vue.js之间的通信仅在插入时更改卡片的视图?
问题描述
当我单击组件 B 上的插入文本按钮时遇到问题,它将添加组件 A 的文本卡 .. 插入卡时我需要 textarea,并显示保存按钮,然后单击保存 textarea 后必须隐藏已完成但问题是当重新加载页面时,文本区域和保存按钮再次显示。注意 A,B 是兄弟姐妹
//组件A
<template>
<div class="answer-text-container answer-inner-container">
<div class="content-inner">
<p class="answer-type">{{ text.type }}</p>
<p v-show="!this.show" class="answer-text">{{ text.body }}</p>
<textarea v-model="text.body" v-show="this.show" rows="3" class="edit-text-area border rounded" placeholder="Enter the text here"></textarea>
</div>
<div class="button-container" v-show="!this.show">
<button type="button" @click="editText" class="btn btn-primary edit-text-btn">
<i v-bind:class="[editTextString]"></i>
</button>
<button type="button" @click="$emit('delete')" class="btn btn-danger edit-text-btn">
<i class="fas fa-trash-alt"></i>
</button>
</div>
<button type="button" @click="editText" class="btn btn-success rounded" v-show="this.show">Save</button>
</div>
</template>
<script>
export default {
data: function() {
return {
show: 0,
editTextString: "far fa-edit"
};
},
props: ["text"],
methods: {
editText() {
this.show = !this.show;
console.log(this.text);
},
removeTextComp() {}
}
};
//组件B
<template>
<div class="toolbar-container mb-4">
<div class="col-md-12 p-0 text-center">
<div class="row mx-0">
<div class="col-md-4 p-0 d-inline-block toolbar-sub-container">
<a @click="insertText" href="#">
<p>Insert Text</p>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {};
},
mounted() {},
methods: {
insertText() {
this.$parent.insertTextComp();
}
}
};
</script>
解决方案
show:0
是入口值。当您重新加载页面时,此值也会重新加载。因此,如果您想在重新加载后获得实际值,请show
使用 localStorage 或 vuex 存储。还有一个,我的意思是如果你的show
值是布尔值会更好。
推荐阅读
- c# - 6.12.0 unity sdk 中是否没有继续操作“ContinueWithOnMainThread”?
- java - BYACCJ:如何在错误消息中包含行号?
- xml - 扩展中的 xsd 类型使用
- assembly - 以 mips 计算平均值
- nginx - 来自内部 IP 的 NGINX 反向代理与 :PORT
- android - 增加数字选择器轮子项目数 - 默认设置为轮子中的 3 个项目
- docker - 在以“/bin/bash”作为入口点的 Docker 中作为命令执行时,JavaScript 中的 Shebang 被忽略
- python - 绘制多个条形图
- angularjs - SpringBoot : RestAPI 显示唯一记录
- python-3.x - 有没有办法通过类中的额外输入来动态更改命令的名称?