Vuejs变量分配错误答案

【问题标题】：Vuejs Variable Assign ErrorVuejs变量分配错误
【发布时间】：2018-03-13 17:26:57
【问题描述】：

这个错误是我的标题，我正在使用 VueJs、Vue-Resourse 和 Laravel 的组合。

当我尝试将 1 个局部变量分配给使用 vue-resource 发送 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>

PHP

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

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

错误

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() 返回的数据对象时，它显示数据非常好，但当我尝试将它分配给变量时，它会抛出错误，这毫无价值。

我也将 vuejs 与 vue-resource 一起包含在本地。

我的图片 console.logging(this): https://imgur.com/zP5dpl3

【问题讨论】：

你安装了 VueResource 吗？
其实是在调用$http中的get时出现错误。 $http 似乎没有定义。能否提供配置VueResource的代码？
@Bert 我将它保存在本地的 public/js 文件夹中。它位于我在使用 JS 的页面上扩展的 app.blade.php 模板中。
了解调用getFlagTypes 的上下文会很有用。也许this 不是您所期望的。在this.$http.get 之前尝试console.log(this)
@apokryfos 我发现了错误，我会给出答案，所以请告诉我你的想法，因为在我看来它几乎不相关，尤其是它发回的信息。

标签： javascript laravel vue.js vue-resource

【解决方案1】：

解决方案

把这行代码:checked="{flag.name == chosenFlag}"改成:checked="flag.name == chosenFlag"

解释

所以错误不在我给出的任何代码中，尽管错误是由我在使用 Vue-Resource 发出 ajax 请求后尝试分配变量触发的，但它不是错误的实际来源。

在@apokryfos 在我的this.$http.get 函数之前要求我console.log(this) 之后，我决定之后再做一次，发现数据实际上已被设置，如下所示：https://imgur.com/a/3vZVe

然后我去了我的代码，该代码以 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>

解决此错误的方法是从:checked="" 属性中删除花括号。我使用了花括号，因为 vuejs 文档显示它是需要使用的，但它是问题的根源。我认为我的 vuejs 版本是这背后的原因，这也可能误导了任何试图提供帮助的人。

【讨论】：