3
\$\begingroup\$

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?

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

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.

\$\endgroup\$
8
  • \$\begingroup\$ 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 \$\endgroup\$ Commented Jul 5, 2018 at 9:15
  • \$\begingroup\$ @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. \$\endgroup\$ Commented Jul 5, 2018 at 14:40
  • \$\begingroup\$ 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. \$\endgroup\$ Commented Jul 6, 2018 at 6:34
  • \$\begingroup\$ @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. \$\endgroup\$ Commented Jul 6, 2018 at 8:07
  • \$\begingroup\$ 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). \$\endgroup\$ Commented Jul 6, 2018 at 8:19

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.