BootstrapVue b-form-group 标签绑定，标签未显示答案

【问题标题】：BootstrapVue b-form-group label binding, label not showingBootstrapVue b-form-group 标签绑定，标签未显示
【发布时间】：2020-04-21 11:00:03
【问题描述】：

Vue.js 新手，无法让表单组标签显示在组件中。我正在尝试创建一个组件来节省一些时间，因为我需要多次使用它。

谢谢

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

'''

【问题讨论】：

您当前正在将您的 mylabel 属性绑定到数据属性 foo。您是否有一个名为 foo 的数据属性设置为字符串？
此外，如果您没有名为foo 的数据属性，并且只是尝试将标签设置为字符串foo，请尝试将其从:mylabel="foo" 重写为mylabel="foo"。（注意: 已被删除）
一点旁注。如果您除了打印标签之外不打算做任何事情。使用插槽可能有点矫枉过正。您可以改为将:label="mylabel" 添加到您的b-form-group，这将得到相同的结果。
谢谢 Hiws。我稍后会试试这个。干杯

标签： vue.js bootstrap-vue

【解决方案1】：

问题是你绑定了你的值<ZComplianceField :mylabel="foo"></ZComplianceField>。

请注意，: 在 mylabel 前面。 : 是 v-bind 的简写，它绑定了一个数据属性。

您想要的是删除:，以便您的foo 被视为字符串。

您的另一个选择是在您的数据中定义 foo 并将其设置为字符串。

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

【讨论】：