PHP 변수를 Vue 탭 구성 요소에 전달

PHP 변수를 Vue 탭 구성 요소에 전달

나는 PHP 변수 $avail을 내 Vue ComponentHome에 소품으로 전달하려고 한다.

아래는 내 코드의 단순화된 버전이다.내 페이지에서는 "Avail" 변수가 "Availability:" 이후의 공간이 비어 있어 정의되지 않은 것 같다.v-bind:avail="{{$avail }}}"을 사용해 보았으나, 그 다음 구성 요소가 전혀 로드되지 않는다.왜 이러한가?탭 구성 요소 중 하나만 이 변수를 사용하므로 문제가 있는가?아니면 내가 제대로 전달하지 못하고 있는 것일까?

추가 정보:나는 PHP 변수 $avail이 올바르게 설정되고 있는지 테스트했다.부에 내비게이션 바도 전에는 잘 작동했으므로 문제 그 자체가 되어서는 안 된다.

인덱스.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();
    }
  }
})

이후$availPHP 변수인 경우 PHP로 렌더링해야 한다.

대체하다avail="{{ $avail }}"와 함께avail="<php echo $avail; ?>"

또한 예시 상단에 올바른 닫기 태그를 사용하십시오. php?>유효한 종료 태그가 아니에요

참조URL: https://stackoverflow.com/questions/52152887/passing-php-variable-as-prop-to-vue-tab-component