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

Question

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'


});

Does game.player1 render properly if v-if is omitted? Just wondering if game.ready is being misinterpreted. — Donnie
– Donnie, Commented Dec 30, 2016 at 19:49
I took out the v-if condition completely, and I do not see player1's ID display in the list. I see a null variable being putputted. I think the JSON output is being parsed. When I look at the object in Google Chrome Dev,s tools, I see a JSON object. — Tom Morison
– Tom Morison, Commented Dec 30, 2016 at 21:45

Rwd · Accepted Answer · 2016-12-30 23:48:09Z

2

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!

answered Dec 30, 2016 at 23:48

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Tom Morison Over a year ago

Thanks for youre answer, but now when i try to view the page, in my Chrome DevTools, I get a [Vue warn]: Error when evaluating expression "game.player1": TypeError: Cannot read property 'player1' of undefined (found in component: <games>).

Rwd Over a year ago

@TomMorison In that case can you edit your question to show what you are getting if you do console.log(games) inside your response.json() function? Also, you might find this usful: chrome.google.com/webstore/detail/vuejs-devtools/…

Tom Morison Over a year ago

Here is a screenshot of what I get in DevTools s29.postimg.org/mjgqv4rlj/…

Rwd Over a year ago

Ok, next one. Comment out the entire <ul>...</ul> and add in <pre>@{{ games | json }}</pre>. What do you get?

Tom Morison Over a year ago

I just get an empty array. When I visit api/games in the browser, I get my JSON output.

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related