v-show与props配合失效求助：通过props控制按钮显隐异常

Hey there, let's walk through why your button visibility control via props isn't working—there are two straightforward issues here that are easy to fix:

1. Prop Name Mismatch #

Right now, you're passing props in your Blade template as savebutton and updatebutton, but your component's props are defined as showsavebutton and showupdatebutton. Vue can't map these mismatched names, so your component isn't receiving the values you're trying to send.

Vue automatically converts kebab-case attributes in templates to camelCase props in your component, so you'll want to align the names properly.

2. Passing Boolean Values as Strings #

When you write savebutton="false" in Blade, you're actually passing the string "false" instead of the boolean value false. Vue's v-show treats all non-empty strings as true, so the button would still render even though you intended to hide it. To pass a boolean, you need to use Vue's binding syntax (the colon : prefix).

Corrected Code Examples #

Updated Blade View

Use kebab-case for the prop names and bind the boolean values with ::

<product-form-component :show-save-button="false" :show-update-button="false"></product-form-component>

Updated Component Props

Use camelCase to match the kebab-case attributes (this is Vue's standard convention):

export default {
  props: ['showSaveButton', 'showUpdateButton', 'modalId']
}

Updated Component Template

Update the v-show directives to use the corrected prop names:

<template>
  <div class="form-actions text-right col-md-12">
    <button v-show="showSaveButton" class="btn btn-primary">Save</button>
    <button v-show="updatemode && showUpdateButton" class="btn btn-primary">Update</button>
  </div>
</template>

A quick note: Make sure updatemode is properly defined in your component (either as a data property, computed value, or another prop) if you want the Update button's visibility to depend on it.

内容的提问来源于stack exchange，提问作者Ali Haider