Vuejs Variable Assign Error

Question

This error is my title and i'm using a combination of VueJs, Vue-Resourse and Laravel.

The error happens when i try assigning 1 local variable to response data that i get back from sending an AJAX request using vue-resource.

Code

Javascript

<script>
        flags_page = new Vue({

            el: '#body',

            data: {
                retrievedFlags: {},
                chosenFlag: ''
            },

            ready: function () {
                this.getFlagTypes();
            },
            methods: {
                getFlagTypes: function(){

                    this.$http.get('/getFlags=' + '{{ $id }}', function(data){

                        //Problem with this line
                        this.retrievedFlags = data.retrievedFlags;

                    })
                }
            }
        });
    </script>

PHP

public function getFlags($type)
   {
    $flags       = Flags::all();

    return [
        'retrievedFlags' => $flags,
        'chosenFlag' => $type,
    ];
}

ERROR

vue.min.js:7 Uncaught TypeError: Cannot read property 'get' of undefined
    at new n (vue.min.js:7)
    at r._bind (vue.min.js:8)
    at n (vue.min.js:6)
    at vue.min.js:6
    at new n (vue.min.js:6)
    at n.create (vue.min.js:6)
    at r.create (vue.min.js:6)
    at r.diff (vue.min.js:6)
    at r.update (vue.min.js:6)
    at n.update._update (vue.min.js:8)

Again i'm not sure whats causing this I've changed so many things around and i get the same error still. I find this strange because i have other pages that do the exact same things but for some reason this ones throwing up an error.

Its worth nothing that when i console.log() the data object that is returned it shows the data perfectly fine, but the moment i try to assign it to a variable it throws the error.

I also have vuejs included locally along with vue-resource.

Image of me console.logging(this): https://i.sstatic.net/YaAvR.jpg

Actually, it seems the error occurs when get from $http is called. $http doesn't seem to defined. Can you provide the code where you configure VueResource? — Nicolas P.
– Nicolas P., Commented Oct 2, 2017 at 15:45
@Bert I have it saved locally in the public/js folder. Its located in my app.blade.php template which i extend on the page that i use the JS. — Kenziiee Flavius
– Kenziiee Flavius, Commented Oct 2, 2017 at 15:48
It would be useful to know the context which getFlagTypes gets called in. Perhaps this is not what you'd expect. Try a console.log(this) before the this.$http.get — apokryfos
– apokryfos, Commented Oct 2, 2017 at 15:54
@apokryfos I have found the error, ill make an answer so let me know what you think because it seems to me like its almost unrelated, especially with the information it was sending back. — Kenziiee Flavius
– Kenziiee Flavius, Commented Oct 3, 2017 at 7:21

Kenziiee Flavius · Accepted Answer · 2017-10-03 07:37:59Z

The Solution

Changing this line of code :checked="{flag.name == chosenFlag}" to this :checked="flag.name == chosenFlag"

The Explanation

So the error was not in any of the code that i gave out, although the error was triggered by me trying to assign a variable after making an ajax request using Vue-Resource it wasnt the actual source of the error.

After @apokryfos asked me to console.log(this) before my this.$http.get function i decided to do it again afterwards and found that the data was infact being set, as seen here: https://i.sstatic.net/EjRqw.jpg

So i then went to my code that renders the data in HTML and commented it out to see what was wrong and it worked.. no error. This was the code i was using to render the HTML.

<div class="mt-checkbox-inline">
    <div class="col-md-1" v-for="flag in retrievedFlags">
        <label>
            <input type="checkbox" :checked="{flag.name == chosenFlag}" value="@{{ flag.name }}"> @{{ flag.name }}
        </label>
    </div>
</div>

The solution to this error was to remove the curly braces from the :checked="" attribute. I used the curly braces because the vuejs documentation showed that it was what was needed to be used, but it was the source of the problem. I think my vuejs version was the reason behind this which also probably misled anyone trying to help.

Collectives™ on Stack Overflow

Vuejs Variable Assign Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related