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

Question

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>

'''

You're currently binding your `mylabel` prop to the data property `foo`. Do you have a data property named foo that's set to a string? — Hiws, Apr 21 '20 at 11:38
Additionally, if you don't have a data property called `foo` and is simply trying to set the label to the string `foo`, try rewriting it from `:mylabel="foo"` to `mylabel="foo"`. (notice the `:` is removed) — Hiws, Apr 21 '20 at 11:44
A little sidenote. If you aren't planning to do anything other than printing your label. Using the slot might be a bit overkill. You could instead add `:label="mylabel"` to your `b-form-group`, which would give the same result. — Hiws, Apr 21 '20 at 11:53

score 1 · Accepted Answer · answered Apr 21 '20 at 11:51

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"
    }
  }
  ...
}

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

1 Answers1