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

Question

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

此代码不起作用。变量文本在javascript上是动态的。php 函数 lang 不翻译连接词，显示 reportParameter.txt_date

非工作显示报告参数.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>