Laravel Blade 和 Vue.js，在模板中連接 php 函數和 vue.js javascript 變量

Question

我想知道如何將 laravel php 函數 lang 與 javascript 變量連接起來。 這里有一個例子：

此代碼不起作用。 變量 text 在 javascript 上是動態的。 php函數lang不翻譯連接詞，顯示reportParameter.txt_date

不工作顯示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>

`

它工作顯示日期

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

問題是變量文本必須動態生成。 問題僅在於我如何進行串聯。 我沒有正確連接那里。 我嘗試了很多不同的方法，但都沒有成功。

非常感謝你的幫助。

Answer 1

您可以簡單地將占位符添加到您的 HTML 標記中，如下所示：

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

然后，如果您想從服務器動態獲取名稱，只需發布​​請求即可獲取名稱。

例如，您可以為此使用 axios。

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