在子组件

Question

我试图在子组件的父组件中隐藏一个按钮。我使用了props来绑定元素，并使用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">

Answer 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;
        }
    }
})