Javascript Vuejs变量分配错误

这个错误是我的标题，我使用的是VueJs、Vue资源和Laravel的组合

当我尝试将1个局部变量分配给通过使用vue资源发送AJAX请求返回的响应数据时，会发生此错误

代码

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>

错误

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)

再一次，我不确定是什么原因导致了这一点，我改变了很多事情，我仍然得到同样的错误。我觉得这很奇怪，因为我有其他页面做完全相同的事情，但出于某种原因，这些页面抛出了一个错误

当我

console.log（）

返回的数据对象显示数据时，数据显示得非常好，但当我尝试将其分配给变量时，它抛出了错误，这一点毫无价值

我还将VUEJ与vue资源一起包含在本地

---

me控制台的图像。日志记录（此）：

解决方案

将这行代码更改为：checked=“{flag.name==chosenFlag}”：checked=“flag.name==chosenFlag”

解释

因此，我给出的任何代码中都没有错误，尽管错误是由我在使用Vue资源发出ajax请求后尝试分配变量触发的，但它不是错误的实际来源

在@apokryfos要求我在我的

this.$http.get

函数之前执行

console.log（this）

之后，我决定在之后再次执行此操作，并发现数据实际上已被设置，如下所示：

因此，我接着使用HTML呈现数据的代码，并将其注释掉，以查看有何错误，然后它就成功了。。没有错误。这就是我用来呈现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>

@{{flag.name}

---

此错误的解决方案是从

：checked=“

属性中删除大括号。我之所以使用大括号，是因为vuejs文档表明它是需要使用的，但它是问题的根源。我认为我的vuejs版本是造成这种情况的原因，这也可能误导了任何试图提供帮助的人。

解决方案

将这行代码更改为：checked=“{flag.name==chosenFlag}”：checked=“flag.name==chosenFlag”

解释

因此，我给出的任何代码中都没有错误，尽管错误是由我在使用Vue资源发出ajax请求后尝试分配变量触发的，但它不是错误的实际来源

在@apokryfos要求我在我的

this.$http.get

函数之前执行

console.log（this）

之后，我决定在之后再次执行此操作，并发现数据实际上已被设置，如下所示：

因此，我接着使用HTML呈现数据的代码，并将其注释掉，以查看有何错误，然后它就成功了。。没有错误。这就是我用来呈现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>

@{{flag.name}

---

此错误的解决方案是从

：checked=“

属性中删除大括号。我之所以使用大括号，是因为vuejs文档表明它是需要使用的，但它是问题的根源。我认为我的vuejs版本是造成这种情况的原因，这也可能误导了任何试图提供帮助的人。

您安装了VueResource吗？实际上，在调用

$http

获取

时，似乎会发生错误<代码>$http

似乎未定义。您能提供配置VueResource的代码吗？@Bert我已将其保存在public/js文件夹中。它位于我的app.blade.php模板中，我在使用JS的页面上对其进行了扩展。了解调用

getFlagTypes

的上下文将非常有用。也许这不是你所期望的。在

this.$http.get

@apokryfos之前尝试

console.log（this）

。

this.$http.get

@apokryfos我发现了错误，我会给出一个答案，让我知道你的想法，因为在我看来，它几乎不相关，尤其是与它发送回来的信息。你安装了VueResource吗？实际上，调用

$http

时，似乎会发生错误<代码>$http似乎未定义。您能提供配置VueResource的代码吗？@Bert我已将其保存在public/js文件夹中。它位于我的app.blade.php模板中，我在使用JS的页面上对其进行了扩展。了解调用

getFlagTypes

的上下文将非常有用。也许这不是你所期望的。在

this.$http.get

@apokryfos之前尝试

console.log（this）

。我发现了错误，我会回答您的问题，让我知道您的想法，因为在我看来这几乎是不相关的，尤其是与它发送回来的信息。