时间戳

首页 > 解决方案 > 如何让 Vue 在表单字段中使用与 value 属性不同的值？

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

问题描述

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

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

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

我希望我能做这样的事情：

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

然后在输出时使用 Vuedata-tvalue而不是。value有可能吗？

标签： javascriptvue.jsinternationalization

解决方案

现在，我最终创建了一个“阴影”属性并通过watch函数对其进行了更改。请注意，我通过自定义ref道具和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 }}

推荐阅读