vue.js — Передача переменной PHP в качестве пропеллера компоненту вкладки Vue

Я пытаюсь передать 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();
}
}
})

3

Решение

поскольку $avail переменная PHP, вам нужно отобразить ее с помощью PHP.

замещать avail="{{ $avail }}" с avail="<php echo $avail; ?>"

Вам также нужно будет использовать правильный закрывающий тег в верхней части вашего примера. php?> недопустимый закрывающий тег.

2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]