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属性将是strings。在上面的示例中，它们不是 boolean false，而是string "false"。

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

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

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

组件内部的变量和 v-show

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

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

不存在于您的组件中。您必须在组件中使用您在v-show.

考虑到您已经props声明了一些，下面是v-show在data()using the propsas initial value中声明这些变量的示例：

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>