Buefy - off-model binding

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="container">

  <p>
    A single input is used to set different data properties, depending on the user's previously selected option. This is rare, and a bit hacky and un-vue-like, but it does the job without needing to create multiple repeated inputs with v-if to toggle them. 
  </p>

<form class="section">
  <label class="radio">
    <input type="radio"
      v-model="option" value="optionA">
    option A
  </label>
  
  <br>

  <label class="radio">
    <input type="radio"
      v-model="option" value="optionB">
    option B
  </label>
  
  <br><br>


  <input type="number" min="20" class="input number"
    v-model="numberVal"
    @input="increaseMe($event.target.value)">

</form>

<div class="columns is-mobile">

  <div class="column">
    <div class="content" style="padding: 2em;">
      <h2>
        UI number: {{ numberVal }}
      </h2>
    </div>
  </div>
  
  <div class="column">
    <pre>
    payload {
      	a_number: {{ payload.a_number }},
        b_number: {{ payload.b_number }}
    }
    </pre>
  </div>
</div>



</div>

JavaScript

const example = {
    data() {
        return {
            numberVal: 20,
            option: 'optionA',
            payload: {
            	a_number: 20,
              b_number: 20
            }
        }
    },
    methods: {
        increaseMe: function (val) {
        	if(this.option === 'optionA') {
          	this.payload.a_number = val
          } else {
          	this.payload.b_number = val
          }
        }
    }
}

const app = new Vue(example)
app.$mount('#app')