Laravel Blade 和 Vue.js，在模板内连接 php 函数和 vue.js javascript 变量

Question

我想知道如何将 laravel php 函数 lang 与 javascript 变量连接起来。 举个例子：

此代码无效。变量文本在 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>