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

两点：

• 你传递的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-show s中使用的变量：

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

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

考虑到您已经宣布了一些props，以下是使用v-show作为初始值在data()中声明这些props变量的示例：< / p>

＆＃13;

＆＃13;

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!'
  }
})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用绑定语法:将道具传递给子级，因此在您的情况下您忘记添加它：

尝试：

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