在子组件中隐藏父组件 <button> 元素答案

【问题标题】：Hide parent component <button> element in Child component在子组件中隐藏父组件 <button> 元素
【发布时间】：2019-12-05 04:08:08
【问题描述】：

我试图在子组件中隐藏父组件中的按钮。我使用道具绑定元素并使用 v-show 指令隐藏它，但不是隐藏按钮，而是隐藏整个选项卡。

这是我的父组件：

<div class="col-lg-auto" v-if="unpaid.qr_code === 1">
    <q-btn glossy
           size="md"
           :label="$t('Common.GetQrCode.Button')"
            @click="makePayment(unpaidIndex, true)" color="positive"
            v-bind="share">
    </q-btn>
</div>

<div class="col-lg-auto" v-if="unpaid.qr_code === 1">
       -- OR --
</div>

props: {
  share: {
    type: Boolean,
    default: true
  },

这个组件也在其他组件中使用，至于我的子组件是

<payment-tab v-if="depositRefundID !== undefined && depositRefundID !== null && depositRefundID !== '' && loadingComplete" v-show:share="false">

【问题讨论】：

下次请正确格式化您的代码。
也使用 v-else

标签： javascript vue.js frontend quasar-framework

【解决方案1】：

把孩子藏起来是个好主意。

或者如果你想以这种特定方式，我已经在反应中破解了这种情况。

我会将一个函数从父级传递给子级；此函数将更新父组件中的数据并确定天气以显示子组件。

new VueComponent('parent', {
    template: `
    <div class="...">
        <child-component v-for="obj in object_list" v-if="obj.show" />
    </div

    data: {
       object_list: [
           {show:true, id:1, ...},
           {show:true, id:2, ...},
           {show:false, id:3, ...}
       ]
    },
    methods: {
        toggle_show: function(item_id){
              let item = this.object_list.filter(_item => {_item.id === item_id})
              item.show = !item.show;
        }
    }
})

【讨论】：