I have checkboxes and I need to change the Header on my table depending on the checkbox selected.

From <th>Default</th>...

• If checkbox1 is selected then the header will be change to "CheckBox1".
• If checkbox2 is selected then the header will be change to "CheckBox2".
• If checkbox3 is selected then the header will be change to "CheckBox3".
• If checkbox4 is selected then the header will be change to "CheckBox4".
• If two or more checkbox is selected "Default" is displayed.
• If none checkbox is selected or empty, "Default" is also displayed in the table header.

<input name="cb1" type="checkbox" value="cb1"> CheckBox1
<input name="cb2" type="checkbox" value="cb2"> CheckBox2
<input name="cb3" type="checkbox" value="cb3"> CheckBox3
<input name="cb4" type="checkbox" value="cb4"> CheckBox4

<br>
<br>
<table width="30%"  border="1">
  <tr>
    <th>Row</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

I am using vue and typescript and currently new to it. Thanks.

CodePudding user response：

Firstly, you should consider using v-model for each checkBox instead of the value property (documentation here)

You can use the computed property to computed the title of your page into a function (documentation here)

Working example using classic JS

new Vue({
      el: '#app',
      data() {
        return {
          cb1: false,
          cb2: false,
          cb3: false,
          cb4: false,
        }
      },

      computed: {
        tableTitle() {
          //get the number of checkbox checked
          const nbCheckBox = [this.cb1, this.cb2, this.cb3, this.cb4].reduce((total, current) => total   (current ? 1 : 0), 0)              

          if (nbCheckBox === 1) {
            if (this.cb1) return 'CheckBox1'
            else if (this.cb2) return 'CheckBox2'
            else if (this.cb3) return 'CheckBox3'
            else if (this.cb4) return 'CheckBox4'
          } else return 'Default'
        }
      }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <input name="cb1" type="checkbox" v-model="cb1"> CheckBox1
  <input name="cb2" type="checkbox" v-model="cb2"> CheckBox2
  <input name="cb3" type="checkbox" v-model="cb3"> CheckBox3
  <input name="cb4" type="checkbox" v-model="cb4"> CheckBox4

  <br>
  <br>
  <table width="30%" border="1">
    <tr>
      <th>{{ tableTitle }}</th>
      <th>Default</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

For TS, you can specify the return type of the computed value like

computed: {
        tableTitle(): string {
          ....
        }

CodePudding user response：

Use v-model on the checkboxes.

Use something like this for the header:

boxes.filter(b=>b.selected).length ===1 ? boxes.find(b=> b.selected).name : "Default"

See this playground

<script setup>
import {ref, computed} from 'vue'
const boxes = ref([
  {name: "CheckBox1", selected: false},
  {name: "CheckBox2", selected: false},
  {name: "CheckBox3", selected: true},
  {name: "CheckBox4", selected: false}
])
const headerName = computed(() => {
  return boxes.find(b => b.selected).name
})
</script>

<template>
  <template v-for="box in boxes">
    <label>
      {{box.name}}
        <input type="checkbox" v-model="box.selected">
    </label>
  </template>
<br>
<table width="30%"  border="1">
  <tr>
    <th>Row</th>
    <th>{{ boxes.filter(b=>b.selected).length ===1 ? boxes.find(b=> b.selected).name : "Default"}}</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</template>