Как заставить Vue использовать другое значение, чем свойство value в полях формы?

Question

У меня довольно необычная проблема. Скажите это:

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

Естественно, где-то еще я делаю это:

{{ form.screw.type }} // will write "My value"

Fine. Эмм .. Нет. Потому что мне нужна эта строка для перевода. Но я не могу сделать это прямо в значении поля, потому что мне нужно отправить его без учета. Итак, другими словами:

• Мне не нужно переводить значение поля
• Мне нужно перевести то, что Vue собирается написать (например, метку опции)

Хотел бы я сделать что-то вроде этого:

<option value="My value" data-tvalue="<?php _e('My value', 'fiam'); ?>" ><?php _e('My value', 'fiam'); ?></option>

(for who of you didn't know, _e() is just a WordPress i18n function)

И затем Vue, используя data-tvalue вместо value при выводе. Это как-то возможно?

Answer 1

Пока что я закончил тем, что создал свойство 'shadow' и изменил его с помощью функции watch. Обратите внимание, что я ссылаюсь на SELECT через пользовательские ref prop и Vue.$refs. Итак:

<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>
   //[...]

Затем в 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')
    }
  }
});

Затем снова в html:

{{ form.screw.type_t }} // instead of {{ form.screw.type }}