Question

这个错误是我的头衔，我正在使用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

Answer 1

解决方案

将此行代码:checked="{flag.name == chosenFlag}"更改为此:checked="flag.name == chosenFlag"

解释

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

@apokryfos在console.log(this)函数之前让我this.$http.get之后我决定再次执行此操作，发现数据已经设置好了，如下所示：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版本背后的原因也可能误导了任何想要帮助的人。

Vuejs变量分配错误

1 个答案: