[Vuejs]-How to make Vue use a different value than the value property in form fields?

by

0👍

✅

For now, I ended up creating a ‘shadow’ property and changing it via the watch function. Note that I’m referencing the SELECT via the custom ref prop and Vue.$refs. So:

<select name="screw[type]" ref="screw_type_select" v-model="form.screw.type">
   <option value="My value" data-value="<?php _e('My value', 'context'); ?>"><?php _e('My value', 'context'); ?></option>
   //[...]

Then in Vue:

var vueapp = new Vue({
  el: '#form'
  ,data:{
    form:{
      ,screw:{
        type: "Svasata Piana"
        ,type_t: "Svasata Piana"
      }
    }
  }// data
  ,watch:{
    'form.screw.type':function(){
      var select = this.$refs.screw_type_select;
      this.form.screw.type_t = select.options[select.selectedIndex].getAttribute('data-value')
    }
  }
});

Then again in html:

{{ form.screw.type_t }} // instead of {{ form.screw.type }}
👤Luca Reghellin

Leave a comment