[Vuejs]-How to prevent v-model from being truth/false in an input checkbox (vue)

by

0👍

When binding to checkboxes, Vue provides the true-value and false-value attributes to override the default boolean values:

<input
  v-model="filteredHeaders[index]"
  type="checkbox"
  :true-value="header.text"
  :false-value="null"
>

Here it is in a snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    const allHeaders = [{text: 'item 1'}, {text: 'item 2'}]
    const headers = []
    return {
      allHeaders,
      filteredHeaders: headers,
    }
  },

})
.column {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  padding: 0 10px;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-card>
          <v-card-title>
            <span class="headline">Filter Headers</span>
          </v-card-title>
          <v-card-text>
            <div class="column" v-for="(header, index) in allHeaders" :key="index">
              <input
                v-model="filteredHeaders[index]"
                type="checkbox"
                :true-value="header.text"
                :false-value="null"
                :id="index"
              >
              <label :for="index">{{ header.text }}</label>
            </div>
            <p class="ml-5 mt-10"> {{ filteredHeaders }} </p>

          </v-card-text>

        </v-card>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Leave a comment