Setting condition for vue bootstrap checkbox component prop-CodePudding

I am new to Vue and I have to fix the following issue for work. I have a Bootstrap Vue b-form-checkbox-group similar to the one bellow. The listofOption comes from backend and from legacy databses. Sometime the ColumnName is empty or null. Right now it shows null or a blank space, but I want it to print the text "_blank" if that is the case.

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

I have replaced the :text-field with the following line but can't make it work:

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

CodePudding user response：

You could pass that value binding via function.

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

Then:

:text-field="getColumnName(ColumnName)

CodePudding user response：

You can try with computed property and find the column name:

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>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.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"  aria-label="Individual flavours" stacked>
  </b-form-checkbox-group>
</div>