Passing PHP variable as prop to Vue tab component

Question

I'm trying to pass the PHP variable $avail as a prop to my Vue component ComponentHome.

Below is a simplified version of my code. On my page, the "avail" variable seems to be undefined, as the space after "Availability:" is blank. I have tried using v-bind:avail="{{ $avail }}", but then none of my components load. Why is this? Is there an issue because only one of the tab components uses this variable? Or am I not passing it correctly?

Further info: I have tested that the PHP variable $avail is being set correctly. The Vue navigation bar should also not be an issue itself, as that was working fine before.

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();
    }
  }
})

Maybe `` then it's globally available. – Daniel W. Sep 03 '18 at 15:55 — Daniel W., Sep 03 '18 at 15:55

score 3 · Accepted Answer · answered Sep 03 '18 at 16:00

3

Since $avail is a PHP variable, you'll need to render it with PHP.

Replace avail="{{ $avail }}" with avail="<php echo $avail; ?>"

You will also need to use a correct closing tag in the top of your example. php?> isn't a valid closing tag.

answered Sep 03 '18 at 16:00

Martin van de Belt

96
2

Thanks! I can see that the variable is being loaded correctly in the HTML now (it's showing up as '
') but the text still isn't being loaded on the page.

Agirl

Sep 03 '18 at 16:23

1

You will need pass data down to your subcomponents. I guess, you can do something like this: Also make sure you don't declare a data property with the same name as a props name. You can remove the entire data: {} section in ComponentHome. – Martin van de Belt Sep 03 '18 at 16:42

Passing PHP variable as prop to Vue tab component

1 Answers1