如何在Vuejs 2中使用AJAX渲染數據？

我有問題，嘗試設置數據在Vue公司的實例
（在例子：https://jsfiddle.net/a5naw6f8/4/）通過AJAX如何在Vuejs 2中使用AJAX渲染數據？

我將值賦給數據屬性。我可以呈現考試對象，但是當我要訪問到內部數組exam.questions.length我得到一個錯誤：

"TypeError: exam.questions is undefined"

這是我的代碼：

// .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

有人知道如何解決這個問題？

來源

2017-07-23 Spleen-

你有幾個問題：

您的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請求返回的數據

來源

2017-07-23 05:48:26

許多感謝您的答覆** ** Mark_M。主題是，如果我想使用計算屬性輸入新的條件，則會再次出現相同的錯誤：「TypeError：this.exam.questions is undefined」： [修改示例：https：//jsfiddle.net/9gw2Luax/ 29 /]（https://jsfiddle.net/9gw2Luax/29/） –

我找到了一個解決方案：https://jsfiddle.net/9gw2Luax/30/我認爲問題出現在第一個渲染模板** exam.questions **屬性尚不存在（因爲設置數據的不同步）。但是，如果我定義沒有assigment的數據結構，那麼屬性存在，並沒有錯誤。 –

如何在Vuejs 2中使用AJAX渲染數據？

回答

相關問題