vue bootstrap checkbox组件prop的设置条件答案

【问题标题】：Setting condition for vue bootstrap checkbox component propvue bootstrap checkbox组件prop的设置条件
【发布时间】：2022-11-13 16:44:39
【问题描述】：

我是 Vue 的新手，我必须解决以下工作问题。我有一个类似于下面的 Bootstrap Vue b-form-checkbox-group。 listofOption 来自后端和遗留数据库。有时 ColumnName 为空或 null。现在它显示空或空格，但如果是这种情况，我希望它打印文本“_blank”。

<b-form-checkbox-group id="flavors"
   v-model="status"
   :options="listofOption"
   :text-field="ColumnName"
   :value-field="ColumnName"
    name="flavors" class="ml-4" aria-label="Individual flavours" stacked>
</b-form-checkbox-group>

我已将 :text-field 替换为以下行，但无法使其工作：

:text-field="[(ColumnName && ColumnName != null && ColumnName != '') ? ColumnName : '_blank']"

【问题讨论】：

标签： vue.js checkbox bootstrap-vue

【解决方案1】：

您可以通过函数传递该值绑定。

getColumnName(ColumnName) {
  return (ColumnName && ColumnName != '') ? ColumnName : '_blank' 
}

然后：

:text-field="getColumnName(ColumnName)

【讨论】：

它仍然不起作用！
你介意通过 stackblitz 分享一些背景信息吗？

【解决方案2】：

您可以尝试使用计算属性并找到列名：

new Vue({
  el: '#demo',
  data() {
    return {
      listofOption: [{'a': 1}, {'a': 2}, {'a': 3}],
      status: [],
      columnName: null
    }
  },
  computed: {
    getName() {
      return Object.keys(this.listofOption[0])[0]
    },
    colName() {
      return this.columnName ? this.columnName : this.getName
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
  <b-form-checkbox-group id="flavors"
    v-model="status"
    :options="listofOption"
    :text-field="colName"
    :value-field="colName"
    name="flavors" class="ml-4" aria-label="Individual flavours" stacked>
  </b-form-checkbox-group>
</div>

【讨论】：