Render template from dynamically content?

Hi!

So I'm foreach a bunch of data from a database

@foreach ($citys as $city)
    <a href="{{ json_decode($city->data)->name }}" style="font-size:<?php echo(rand(15,40)); ?>px;
    @if ($city->name == 'Stockholm')
    border: 2px dotted gray;
    @endif
    ">{{ $city->name }}</a>
@endforeach

So one of url can for example look like: http://example.com/stockholm, but i have a few hundred others. And I want to render the API content from http://example.com/api/city/?city=stockholm into a template, when i click one of the foreached links. And in this case Stockholm is the var I want to send to the API.

My "test" template have been this:

<template id="cityTemplate">
    <div>
        <h3>@{{ citys.name }}</h3>
        <button v-on:click="fetchData4('Stockholm')" class="btn btn-primary">View city</button>
            <ul>
                <li id="citys-item" v-for="city in citys">
                    @{{ city.lookup }}
                </li>
            </ul>
    </div>
</template>

But i want the template to be rendered when a success from the API is returned.

The vuejs look like:

      fetchData4: function(city) {
              // GET
              var self = this;
              self.$http.get('api/city?city=' + city).then((response) => {
                // success callback
                self.city = response.body;
              }, (response) => {
                // error callback
              });
            },

And the vue instance look like

new Vue({
   el: '#cities',
   template: '#cityTemplate',
   props: ['data'],
   data: {
      citys: {}
   },

So how to I render the template, with the dynamically content?

JoolsMcFly

9 years ago

Level 2

I'd send $cities to a js variable and load that into vue and let vue handle everything:

<script>
new Vue({
   el: '#cities',
   template: '#cityTemplate',
   data: {
      city: null,
      citys: {!! json_encode($cities) !!}}
   },

methods: {
  fetch4Data: function(city) {
              this.$http.get('api/city?city=' + city).then((response) => {
                this.city = response.body;
              }, (response) => {
                // error callback
              });
}

</script>

// HTML part
<div id="cities">
<ul>
  <li v-for="city in cities">
    <a @click="fetch4City(city.name)">@{{ city.name}}</a>
</ul>

<div v-show="city"> <======== will only show up when you have clicked on a city, and it will change whenever you choose a different city
// add city details here (city.name, city.population_count etc)
</div>

</div>

asdasdsa

9 years ago

Level 6

@JoolsMcFly

Thanks! But I'm getting SyntaxError: Unexpected token '!'. Expected a property name. from the citys: {!! json_encode($cities) !!} line.

EDIT: This is when trying to use assets/js/main.js

When include as a <script></script> is seems to work

JoolsMcFly

9 years ago

Level 2

Yeah, that's because {!! !!}} is a Laravel directive.

If you want to use it in main.js you're going to have to create a JS var and init it with PHP and ref it in main.js:

//blade file
var cities = {!! $cities_from_php !}};

// main.js
<script>
new Vue({
   el: '#cities',
   template: '#cityTemplate',
   data: {
      city: null,
      citys: cities // cities is the var you defined above in blade file
   },

// blablabla
}
</script>

Please or to participate in this conversation.