Using something other than form field's value in Vue

Question

I have a form, I need to send untraslated values, but as well, I need to get translated ones from Vue to write them down in page.

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

So the form will send value, but the user will see data-value intead (which is translated).

What do you think of this way?

Answer 1

This is not the Vue-way to do it. Vue does not recommend the use of $refs. And in this case, you can also avoid it.

Your current code is:

<select name="screw[type]" ref="screw_type_select" v-model="form.screw.type">
 <option value="My value" data-value=""></option>

I would recommend using v-for to loop through your options, and keep all your options in your data.

So for example: (This is how it is done in the Vue JS official documentation)

data() {
 return {
 options: [
 {
 text: "<?php _e('My value', 'context'); ?>",
 value: "My value"
 },
 ...
 ]
 }
}

And then:

<select name="screw[type]" v-model="form.screw.type">
 <option v-for="option in options" v-bind:value="option.value">
 {{ option.text }}
 </option>
</select>

Instead of using the watch, you can use a computed property.

computed: {
 selectedScrewType() {
 return this.options[this.form.screw.type].text;
 }
}

Then you can use {{ selectedScrewType }} in your template.

• Luca Reghellin: Anyway, problem is that <?php _e('My value', 'context'); ?> won't be interpreted inside js, so the output will be exactly <?php _e('My value', 'context'); ?> and not the resulting gettext translation. Still, eventually, I could localize all the translations (it's a wordpress site) via wp_localize_script
• Simon Forsberg: @Stratboy PHP should be interpreted before JS, but I have not tried to use PHP and Vue together and I don't think it's a nice solution of trying to do it your way. It should technically be possible to use it in the way you are trying to.
• Luca Reghellin: hi, sorry I confirm that your method as is, won't work. So for now I'll stick on my original code. Thank you anyway.
• Simon Forsberg: @Stratboy As this is a part of Vue's official documentation and I'm using this method myself in several places, I'm pretty sure this works. I might have written something incorrect in the answer as I haven't tested the answer myself, but I'm pretty sure this answer works. I'd recommend you asking a Stack Overflow question about your specific problem.
• Luca Reghellin: no, I don't think, php in javascript won't be compiled unless it's written right in page (which is not, in my case, and guess in the vast majority of cases).