CODEWITHSUNDEEP
jsonlaravelvue.js
Tom Morison
Tom Morison

Reputation: 592

Vue-if conditional not working. if-Else block appears to be skipped

This is a follow up question to one I posted here: (I have 2 records in a database Vue outputs 8 records). In that question, was having trouble fetching a JSON list of games for an online casino I'm building. In my original question, Vue was unable to load the JSON as JSON, but now that's fixed.

I am now trying to parse this JSON using Vue to loop through all of the games in the games array and print either In progress or Game is joinable. However, instead of getting 8 different records from the database (from a weird response array object returned by this.$http.get. I now see that my JSON list is seemly being ignored by my Vue template; none of the objects in the collection get outputted (again either In progress or Joinable. I just get a blank list.

Is my v-if conditional programmed correctly? I checked the documentation and everything seems to be set up correctly. I find it odd that neither the v-if, or v-else, divs> are executed.

vuewgames.blade.php

@extends('app')


@section('content')
    <strong>Below is a list of joinable games</strong>
    <div class="container">
    <games></games>
    </div>

  <div id="games-list">
      <template id="games-template">



          <ul class="list-group">
              <li class="list-group-item" v-for="game in games">
                     <strong>play against @{{ game.player1 }}</strong>
              </li>



          </ul>

            <pre>@{{ games | json }}</pre>

      </template>


  </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>

    <script src="js/all.js"></script>
@endsection

all.js

Vue.component('games', {
    template: '#games-template',


    data: function() {
        return {

            games: []


        };



    },


    created: function () {

        var self = this;

        this.$http.get('/api/games').then(function (response) {
            // fetch array from jsoN object

            response.json().then(function (games) {
                console.log(games);
            });

        });
    },

});




new Vue({
    el: 'body'


});

Upvotes: 3

Views: 1684

Answers (1)

Rwd
Rwd

Reputation: 35220

The reason that you're not getting the information to the instance is due to scope.

When you're using closures in javascript the scope of the this isn't the containing object.

One way to get around this is to assign this to another variable outside of the function and then use that instead. You should be able to get it working by changing your created method to be:

created: function () {

    var self = this;

    this.$http.get('/api/games').then(function (response) {
        // fetch array from jsoN object

        response.json().then(function (games) {
            self.games = games;
        });

    });
},

Hope this helps!

Upvotes: 2

Related Questions