将数据从 PHP/HTML 传递到 .vue 组件 [英] Passing data from PHP/HTML to .vue Component
问题描述
我想做的事情看似简单，但我似乎无法弄清楚.基本上，我有 2 个文件:
具有以下内容的 PHP 文件:
<代码>...<user-panel v-if="user.id &&loaded" v-bind:user="user" v-bind:name="theUserName"></user-panel>...
具有以下内容的 .Vue 组件文件(被编译到另一个文件中):
<span id="userPanel" class="d-flex align-items-center"><a href="#" role="button" class="user-dropdown-toggle"><div class="logged-in d-flex align-items-center"><span class="d-flex align-items-center justify-contnet-center"></span>{{姓名}}</a></span></模板><脚本>导出默认{name: "用户面板",道具:['用户']，创建(){console.log(this.$refs.myTestField.value)}}
我想要做的就是将数据从 PHP 传递到 Vue 到 {{name}}.我已经尝试过 v-bind、数据属性、隐藏输入等.任何帮助将不胜感激.
我的目的是将数据从我的 .php 文件传输到 VUE 代码所在的 .js 文件.在这里，我向您展示我的代码.在建议的示例中，我想导入一个简单的字符串，随后我想导入一个 JSON.非常感谢.文件 PHP
<App v-bind:import='值导入'>C'è QUALCHE 问题 </App></div>"文件 .js
var App = Vue.component("App", {模板:`<div class="容器"><div><h2>{{titolo }}</h2><h3>{{ import }}</h3>
`，道具:['进口']，数据() {返回 {颜色:颜色:红色"，名称:Inizio Container"，};}});新的 Vue({el: "#app",});
Quanto sopra purtroppo non funziona.
What I'm trying to do is seemingly simple, but I can't seem to figure it out. Basically, I have 2 files:
A PHP file with the following:
...
<user-panel v-if="user.id && loaded" v-bind:user="user" v-bind:name="theUserName"></user-panel>
...
A .Vue component file with the following (that gets compiled into another file):
<template>
<span id="userPanel" class="d-flex align-items-center">
<a href="#" role="button" class="user-dropdown-toggle">
<div class="logged-in d-flex align-items-center">
<span class="d-flex align-items-center justify-contnet-center"></span>
{{name}}
</div>
</a>
</span>
</template>
<script>
export default {
name: "UserPanel",
props: ['user'],
created () {
console.log(this.$refs.myTestField.value)
}
}
</script>
All I'd like to do is pass data from the PHP to Vue into {{name}}. I've tried v-bind, a data-attribute, a hidden input, etc. Any help would be greatly appreciated.
My intention is to transfer data from my .php file to the .js file where the VUE code resides. Here I show you my code. In the proposed example I would like to import a simple string, subsequently I would like to import a JSON. Thank you so much. File PHP
<div id='app'> <App v-bind:import='Value Import'> C'è QUALCHE PROBLEMA </App> </div>"
File .js
var App = Vue.component("App", {
template: `
<div class="container">
<div>
<h2>{{ titolo }}</h2>
<h3>{{ import }}</h3>
</div>
</div>
`,
props: ['import'],
data() {
return {
color: "color: red",
titolo: "Inizio Container",
};
}
});
new Vue({
el: "#app",
});
Quanto sopra purtroppo non funziona.
这篇关于将数据从 PHP/HTML 传递到 .vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
