v-show 不使用道具

Question

我正在尝试使用道具隐藏或显示按钮。

这里是代码

查看（刀片）

<product-form-component savebutton="false" updatebutton="false"></product-form-component>

组件模板

<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>

Javascript

export default {
        props: ['showupdatebutton', 'showsavebutton', 'modalid']
}

Answer 1

使用绑定语法: 传递给子级的道具，所以在你的情况下你忘了添加它：

试试：

<product-form-component :savebutton="false" :updatebutton="false"></product-form-component>

Answer 2

两点：

• 您正在传递的props 不会按照您认为的方式工作；和
• 您必须在组件中使用您在v-show 中使用的名称创建数据变量（或道具）。

传递道具

当你通过时：

<product-form-component savebutton="false" updatebutton="false"></product-form-component>

在组件内部，savebutton 和 updatebutton 属性将是字符串。在上面的例子中，它们不是布尔值false，而是字符串"false"。

要将它们绑定到不同的值，请使用v-bind:propname 或其简写形式:propname：

<product-form-component :savebutton="false" :updatebutton="false"></product-form-component>

这样，在组件内部，这些属性将真正具有值false。

组件内部的变量和v-show

您在v-shows 中使用的变量：

<button v-show="showsavebutton" ...
<button v-show="updatemode && showupdatebutton" ...

在您的组件中不存在。您必须使用您在 v-show 中使用的名称在组件中创建数据变量（或道具）。

考虑到您已经声明了一些props，下面是一个使用props 作为初始值在data() 中声明那些v-show 变量的示例：

Vue.component('product-form-component', {
  template: "#pfc",
  props: ['updatebutton', 'savebutton', 'modalid'],
  data() {
    return {
      updatemode: this.updatebutton,         // initialized using props
      showupdatebutton: this.updatebutton,
      showsavebutton: this.savebutton
    }
  }
})
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue"></script>

<template id="pfc">
  <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>

<div id="app">
  <p>{{ message }}</p>
  <product-form-component :savebutton="true" :updatebutton="true"></product-form-component>
</div>