Question

尝试在Vue实例中设置数据时遇到问题（例如：https://jsfiddle.net/a5naw6f8/4/）

我通过AJAX将值分配给数据属性。我可以渲染考试对象，但是当我想访问内部数组 exam.questions.length 时，我收到错误：

＆＃34; TypeError：exam.questions未定义＆＃34;

这是我的代码：

// .js
new Vue({
    el: '#app',
    data:{
        id: "1",
        exam: {}
    },
    created: function () {
        this.fetchData();
    },
    methods: {
        fetchData: function () {
            $.get("https://dl.dropboxusercontent.com/s/15lkz66wy3fut03/data.json", 
                (data) => {
                    this.exam = data;
                }
            );
        }
    }
});

<!-- .html -->
<div id="app">
    <h1>ID: {{ id }}</h1>
    <h1>Exam: {{ exam }}</h1>

    <!--  exam.questions array is undefined -->
    <!-- <h1>Questions length: {{ exam.questions.length }}</h1> -->
</div>

我发现了一个类似的问题，但它与这个保留字范围有关： Vuejs does not render data from ajax

有人知道如何解决这个问题吗？

Answer 1

你有几个问题：

您的JSON文件无效。 false之后的尾随逗号导致解析器阻塞。
您没有解析您的JSON（这就是您可能没有看到JSON错误的原因）。修复JSON文件后，需要使用this.exam = JSON.parse(data)之类的内容对其进行解析，而不是将字符串分配给this.exam
执行此操作后，您可以在尝试访问其属性之前使用v-if在模板中测试该对象：
<h1 v-if="exam.questions">Questions length: {{ exam.questions.length }}</h1>

v-if将阻止尝试访问exam.questions.length，直到ajax请求返回数据

如何在Vuejs 2中使用AJAX呈现数据？

1 个答案: