Laravel blade and Vue.js, concatenate php function and vue.js javascript variable inside a template

Question

I would like to know how I can concatenate laravel php function lang with javascript variable. Here an example:

This code not work. The variable text is on javascript an is dynamic. The php function lang does not translate the concatenated word, display reportParameter.txt_date

Not work display reportParameter.txt_date

template: `
<div class="text-center mt-1">
    <div class="custom-control custom-radio custom-control-inline" v-for="(text, val, index) in optionsParsed">
        <input class="custom-control-input" type="radio" v-model="checked" :id="nomRadio+'_'+index" :name="nomRadio" :value="val" @change="getChecked(checked)">
        <label class="custom-control-label" :for="nomRadio+'_'+index">@lang('reportParameter.'.@{{text}}')</label>
    </div>
</div>

`

it works display Date

 template: `
<div class="text-center mt-1">
    <div class="custom-control custom-radio custom-control-inline" v-for="(text, val, index) in optionsParsed">
        <input class="custom-control-input" type="radio" v-model="checked" :id="nomRadio+'_'+index" :name="nomRadio" :value="val" @change="getChecked(checked)">
        <label class="custom-control-label" :for="nomRadio+'_'+index">@lang('reportParameter.text_date')</label>
    </div>
</div>`

The problem is the variable text must be generated dynamically. The problem is only how I do the concatenation. I don't concatenate there correctly. I try a lot of different ways, but no success.

Thank you so much for your help.

Answer 1

You can simply add a placeholder to your HTML tag like this:

<template>
  <p>Hallo my name is {{ name }}</p>
</template>

Then if you want to get the name dynamically from the server you simply post a request to get the name.

You can for instance use axios for that.

<script>
export default {
  data: () => ({
    name: ''
  }),

  // going to run if the app gets mounted / page reload so to say
  mounted() {
    getName();
  },

  methods: {
    getName() {
      axios.get('/api/name')
           .then(response => name = response.data)
           .catch(error => console.log(error)
    }
  }
}
</script>