Vue 仅使 v-for 中的一个特定组件对 prop 做出反应，而不是其他答案

【问题标题】：Vue Make only one specific component from v-for react to prop not otherVue 仅使 v-for 中的一个特定组件对 prop 做出反应，而不是其他
【发布时间】：2019-11-11 22:53:30
【问题描述】：

问题：Vuejs，有一个组件（文件上传）在 v-for 循环中的父级内呈现。我正在向它传递一个道具以有条件地呈现一个删除按钮（基本上从 div 类型的预览中删除背景）。如何仅从该循环中制作特定组件以对显示/隐藏道具而不是其他道具做出反应？例如。 v-for 渲染了 3 个 FileUpload 组件。所有人都得到了isRemoveBtnShown 道具。如何让FileUpload1显示按钮，而FileUplod2 and 3不显示？

父母：

<FileUpload v-for="(field, index) in uploadFieldsToRender"
                    ref="file-upload"
                    :key="field"
                    :docPageTitle="field"
                    :isLoading="isLoading"
                    :shouldDocsBeScanned="shouldDocsBeScanned"
                    :isUploadError="isUploadError"
                    :isRemoveBtnShown="isRemoveBtnShown"
                    @fileUpload="handleFileUpload"
                    @fileRemoval="handleFileRemoval"
                    @fileScan="handleFileScan"
                    @fileUploadMounted="onFileUploadMounted"
                />

文件上传：

        <div v-else class="controls">
            <button
                v-if="shouldDocsBeScanned"
                class="button btn-scan"
                @click="() => $emit('fileScan', this.$refs)"
            >
                <span class="btn-icon"></span>
            </button>
            <div v-if="true" class="upload-options">
                <label>
                    <input
                        type="file"
                        class="image-upload"
                        accept="image/*, application/pdf"
                        @change="$event => this.$emit('fileUpload', $event, this.$refs)"
                    />
                </label>
            </div>
            <button
                v-if="isRemoveBtnShown"
                class="button btn-remove"
                @click="() => this.$emit('fileRemoval', this.$refs)"
                >
                <span class="btn-icon"></span>
            </button>
        </div>

道具：

        shouldDocsBeScanned: {
            type: Boolean,
            default: false
        },
        isRemoveBtnShown: {
            type: Boolean,
            default: false
        },

不能使用$refs，因为它们没有反应（可以检查 cmp 是否有背景）非常感谢！

【问题讨论】：

您已共享一个道具值，例如.isRemoveBtnShown，因此当您单击按钮更新时，父项中的该值将更新all component at the same time。那么如何在 component only 或 您需要使用数组 props 中处理该函数和数据
您可以将其设为对象数组并通过映射将属性添加到每个对象，否则您可以在任一按钮上更改相同的值
谢谢大家。我知道我在这三个人之间共享一个道具..只是无法弄清楚如何播放它，所以只有我刚刚加载文件的组件会显示删除 btn 和其他人只会上传图标仍然
我会尝试@hs-dev2MR 方法，看看我是否可以正确管理它
还是没有运气。有人可以提供一些伪代码吗？

标签： vue.js vue-component

【解决方案1】：

想出了一种方法来解决我的问题 1) 将 isRemoveBtnShown 移动到 FileUpload 本身 2) 在父级中为FileUpload cmp 提供其field 的ref，然后通过this.$refs[field] 获取我当前的组件并将其内部属性(isRemoveBtnShown) 更改为所需的。

作为一个魅力，没有兄弟姐妹FileUpoloads 受到影响

【讨论】：