Vue: Add boolean modifier to v-model

[mjamro]

What problem does this feature solve?

There is a .number modifier for v-model which automatically parses the value as integer.

<input v-model.number="age" type="number">

It would be useful to have a similar modifier for boolean values.

<input v-model.bool="isActive" type="checkbox">

This way the checkbox will work when isActive value contains strings "true" and "false" instead of javascripts true/false. Currently the checkbox will be checked if isActive is "false". With this modifier the code will work as it would handle boolean strings "true" and "false" as real booleans (true and false).

What does the proposed API look like?

<input v-model.bool="isActive" type="checkbox">

[yyx990803]

Modifiers are for mapping DOM values back to JavaScript values, not the other way around. You should just convert your strings to real booleans before initializing your app.

[nozich]

You can use v-model="foo" as integer (1 or 0) when bar has boolean

data() {
  return {
    bar: true,
  };
},
computed: {
  foo: {
    set(val) {
      Vue.set(this, 'bar', !!val);
    },
    get() {
      return +this.bar;
    },
  },
}

[jjangga0214]

@mariuszjamro @nozich
Here is a simple solution.

Example

Alternatively, you can use v-bind. v-binded "true"/"false" will be real boolean true / false.

<input type="radio" :value="true" v-model="foo"> yes
<input type="radio" :value="false" v-model="foo"> no

new Vue({
  ...
  data() {
    return {
      foo: false, // this will be boolean true or false, rather than "true" or "false".
    };
  },
  ...
});

Principle

This is because the value of v-binded attribute will be parsed as javascript code.
For example, :value="bar" this value will be the value of variable bar if there is data or prop named bar. If not, it will be set to undefined.
For code like :value="function(){ }", or :value="true", as they aren't variables, so they would be parsed as-is, which are pure javascript value.

Playground And Same Issue

If you want to check it in realtime right now, visit here as an answer of #3238.

[halil-burak]

How can you use the boolean field within v-if by passing it to another component with a submit event? I want to show a text based on a decision over this boolean field.

[nozich]

@hburak you can use Vuex for realtime data based on all around the your Vue App

Component A:

<button @click.prevent="$store.commit('SET_DECISION', true)">Change Decision</button>

Component B:

<div v-if="Decision">BlueBox</div>
<div v-else>RedBox</div>

```javascript
import { mapState } from 'Vuex';

```javascript
computed: {
  ...mapState(['Decision'])
}

Vuex:

state: {
  Decision: false
},
mutations: {
  SET_DECISION(state, Decision) {
    state.Decision = Decision;
  }
}

Dostum componentler arasında event'lar emit ederek ve alt componentlere prop'lar vererek iletişim sağlayabilirsin, ama vuex varken onlara hiç gerek yok.

Vuex, uygulama genelinde canlı olarak veri tutmanı sağlıyor, uygulama üzerinde canlı veritabanı olarak düşünebilirsin, sayfa geçişlerinde ve hangi componentte olursan ol mapState diyip bi data ya canlı olarak bağlanabiliyorsun.