Hide label for particular component in vue / nuxt js-CodePudding

I have created a reusable input component with label, but i want label to hide(if hidden it should not take a space something like display none in css) on some place and label should be visible on some places

here is my code of the input component

<template>
  <div>
    <label for="" :label="label"  >{{label}}</label> //hide or visible depending on requirement
    <div  :tabindex="tabindex" @blur="open = false">
      <div  : @click="open = !open">
        {{ selected }}
      </div>
      <div  :>
        <div
          v-for="(option, i) of options"
          :key="i"
          @click="
            selected = option;
            open = false;
            $emit('input', option);
          "
          
        >
          {{ option }}
        </div>
      </div>
    </div>
  </div>
</template>

here is the code of my script

<script>
export default {
  

  props: {
    label: {
      type: String,
      required: false,
      default: ''
    },
    options: {
      type: Array,
      required: true,
    },
    default: {
      type: String,
      required: false,
      default: null,
    },
    tabindex: {
      type: Number,
      required: false,
      default: 0,
    },
  },

  data() {
    return {

      selected: this.default
        ? this.default
        : this.options.length > 0
        ? this.options[0]
        : null,
      open: false,
    };
  },

  mounted() {
    this.$emit("input", this.selected);
  },
}
</script>

CodePudding user response：

You can just add a prop to control label visibility

script:

props: {
  showLabel: {
    type: Boolean,
    default: false
  }
}

template:

<label v-show="showLabel" />

parent component:

<MyCustomInput :show-label="false" />
<MyCustomInput :show-label="true" />

CodePudding user response：

You can use v-if directive to conditionally render the label element based on the props value.

As v-if will actually destroy and recreate elements when the conditional is toggled. Hence, all the classes/attributes applied to the element will also destroy.

Demo :

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    showMessage: false
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-if="showMessage">{{ message }}</p>
</div>

If you will run above code snippet and open the developer console. You will see that <p> element will not be there as it has been removed from the DOM.

console screenshot :