Is it possible to parse Vue.js data with jQuery?

Question

I have a line of jQuery code:

$("#showNames").text("{{ $t('hide_labels') }}");

I'd like to set text of the #showNames element with the value taken from my vue-i18n instance, dependent on user localization. When it's written this way, I get the literal moustache syntax contents. Is there any way to get the values displayed?

just get vue data directly without messing with the dom at all — frozen, Jul 25 '17 at 19:53
@BertEvans: worked, with one comment: it has to be "this.$t". Please publish it as an answer. — AbreQueVoy, Jul 25 '17 at 19:58

score 1 · Accepted Answer · answered Jul 25 '17 at 20:00

1

You can do this:

$("#showNames").text(this.$t('hide_labels'));

if you so choose. Generally it's best to use Vue methods to update the DOM, but this is available to you if you really need it.

answered Jul 25 '17 at 20:00

Bert

80,741
17
199
164

score 0 · Answer 2 · answered Jul 25 '17 at 19:57

As far as I understand how Vue.js works, it is not posible to parsue vue.js templates directly from jquery. However you have some choices with this problem e.g:

call function $("#showNames").text(translate('hide_labels')); where translation function return translation.
use {{ $t('hide_labels') }} inside vue.js template (without using jquery)

Is it possible to parse Vue.js data with jQuery?

2 Answers2