CODEWITHSUNDEEP
vue.jsbootstrap-vue
renz
renz

Reputation: 165

BootstrapVue b-form-group label binding, label not showing

New to Vue.js, cannot get form group label to show in component. Am trying to create a component to save myself some time as will need to use this a lot of times.

Thanks

 <ZComplianceField :mylabel="foo" :property="user.applicationForm.rating" :isEditing="isEditing"></ZComplianceField>

<template>
  <b-form-group
    label-cols="4"
    label-cols-lg="2"
    label-size="sm"   

  >  
  <template slot="label">{{ mylabel }}</template>
    <b-form-input     
      size="sm"
      type="text"
      v-model="property"
      :disabled="!isEditing"
      :class="{view: !isEditing}"
    ></b-form-input>
  </b-form-group>
</template>

<script>
export default {
  name: "ZComplianceField",

  props: {
    mylabel: {
      required: true
    },
    property: {
      required: true
    },
    isEditing: {
      required: true
    }
  }
};
</script>

'''

label not showing up

Upvotes: 0

Views: 2767

Answers (1)

Hiws
Hiws

Reputation: 10364

The problem is that you´re binding your value <ZComplianceField :mylabel="foo"></ZComplianceField>.

Notice that you have a : in-front of mylabel. The : is shorthand for v-bind, which binds a data property.

What you want is to remove the :, so that your foo is treated a string.

Your other option is to define foo in your data and set it to a string.

{
  ...
  data() {
    return {
      foo: "Some Label"
    }
  }
  ...
}

Upvotes: 1

Related Questions