如何让 Vue 在表单字段中使用与 value 属性不同的值？答案

【问题标题】：How to make Vue use a different value than the value property in form fields?如何让 Vue 在表单字段中使用与 value 属性不同的值？
【发布时间】：2018-07-04 13:17:39
【问题描述】：

我有一个很奇怪的问题。这么说：

<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"

很好。嗯。。不。因为我需要翻译那个字符串。但是我不能在字段的值中正确地做到这一点，因为我需要将其发送未翻译。换句话说：

我不需要翻译字段的值
我需要翻译 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。有没有可能？

【问题讨论】：

您是否尝试过使用计算值？

标签： javascript vue.js internationalization

【解决方案1】：

现在，我最终创建了一个“影子”属性并通过watch 函数对其进行了更改。请注意，我通过自定义 ref 属性和 Vue.$refs 引用 SELECT。所以：

<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 }}

【讨论】：