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"

好。嗯，不因为我需要翻译该字符串。但是我不能在字段的值中正确执行此操作，因为我需要不加翻译地发送它。换句话说：

我不需要翻译字段的值
我需要翻译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

现在，我最终创建了一个“阴影”属性，并通过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 }}

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

1 个答案: