Я пытаюсь передать PHP переменную $ util в качестве опоры моему компоненту Vue ComponentHome.
Ниже приведена упрощенная версия моего кода. На моей странице переменная «util» кажется неопределенной, так как пробел после «Availability:» пуст. Я попытался использовать v-bind: util = «{{$ vend}}», но тогда ни один из моих компонентов не загрузился. Почему это? Есть ли проблема, потому что только один из компонентов вкладки использует эту переменную? Или я не правильно передаю?
Дополнительная информация: я проверил, что переменная PHP $ util установлена правильно. Панель навигации Vue также не должна быть проблемой сама по себе, так как раньше она работала нормально.
index.php
<?php $avail = "Coming soon"; ?>
<!--navigation bar begin-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" data-toggle="collapse" data-target="#myNavbar">
<li class="clickable"avail="{{ $avail }}"v-for="tab in tabs"v-bind:key="tab"v-bind:class="[{ active: currentTab === tab }]"v-on:click="currentTab = tab"><a>{{ tab }}</a></li>
</ul>
</div>
</div>
</nav>
<!--navigation bar end-->
<!--tab content begin-->
<keep-alive><!--to cache inactive components-->
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
<!--tab content end-->
app.js
var ComponentHome = {
template:
'<div class="container">\
<h3>Availability: {{ avail }}</h3>\
</div>',
props: ['avail'],
data: function() {
return {
avail: this.avail
}
}
}
var vm = new Vue({
el: "#content",
components: {
"tab-home" : ComponentHome,
"tab-costsandamenities" : ComponentCosts,
"tab-photos" : ComponentPhotos,
"tab-application" : ComponentApplication
},
data: {
currentTab: "Home",
tabs: ["Home", "Costs and Amenities", "Photos", "Application"]
},
computed: {
currentTabComponent: function () {
return "tab-" + this.currentTab.replace(/ /g ,"").toLowerCase();
}
}
})
поскольку $avail
переменная PHP, вам нужно отобразить ее с помощью PHP.
замещать avail="{{ $avail }}"
с avail="<php echo $avail; ?>"
Вам также нужно будет использовать правильный закрывающий тег в верхней части вашего примера. php?>
недопустимый закрывающий тег.
Других решений пока нет …