[Vuejs]-Use props without component

by

0đź‘Ť

Inside your <head> tag add the “championship” property to the window object like this:

<script>
 window.championship = {{ $championship }};
</script>

Then in your Vue instance data object define “championship” to the previously defined property:

data: {
  championship: championship
}

0đź‘Ť

I believe it would be a lot easier if you make Laravel as a api server and make your application into an “SPA”.

Anyway, the Vue.js template grammar could only work when you include your object into Vue’s instance Which intends to be something

either

Vue.component('someComponent',{
  template: `<h1>Hello</h1>`
})

or

<template>
   <h1>Hello</h1>
</template>
<script>
  export default {
    name: 'hello',
    ...
  }
</script>

So, directly writing your template into Vue style would not make it work.
But, you may still pass the $championship to front as a javascript variable and use vue.js to render the data.

<html>
  <body>
    <div id="app"></div>
  </body>
  <script>
    var championComponent = Vue.component({
      template: `
        <div v-for="team in championship.teams">
          <span>{{ team }}</span>
        </div>
      `,
      data: function () {
        return {
          championship: {{ json_encode($championship) }} // parse your champion data here
        }
      }
    });
    var app = new Vue({
      el: "#app"
    });
  </script>
</html>

Good luck!

Leave a comment