渲染列表

Question

我得到類似這樣〜2000個錯誤：

[Vue warn]: Duplicate value found in v-for="task in tasks": "}". Use track-by="$index" if you are expecting duplicate values.

API響應：

{"data":[{"id":1,"name":"Molestiae aut voluptatum omnis ratione aut.","body":"Laudantium itaque qui qui eius temporibus doloremque officia. Facilis quam aut sunt ipsum eum repellendus nam. Qui doloremque ipsam at sapiente voluptate."}, 
{"id":2,"name":"Nihil sed et ut sapiente ut iusto molestiae.","body":"Ut est doloremque accusantium dolore. Amet dolorem quia omnis quia eos et id omnis. Sunt facilis provident dolorem nisi voluptatibus omnis. Vel accusamus in nisi modi."}, 
{"id":3,"name":"Et et quis natus temporibus dolores quia.","body":"Vitae vitae adipisci dignissimos doloribus explicabo recusandae et. Officiis qui dicta nihil voluptatum aliquid odio. Sit sit doloremque eos minus neque cupiditate eaque qui. Rem nihil nesciunt tenetur quas aut. Sit eligendi unde doloribus consequuntur eius."}, 
{"id":4,"name":"Rem eveniet officiis voluptatem et.","body":"Vitae qui qui totam vel ex quae adipisci. Iure porro qui quia iste culpa quisquam. Hic voluptatum qui tenetur temporibus soluta voluptates corporis."}, 
{"id":5,"name":"Vel dolor nulla quibusdam animi molestias quis voluptatem.","body":"Dolorem deserunt velit porro autem. Beatae sit est quae eum suscipit. Velit tempora aperiam illum autem unde esse mollitia libero. Et consequatur perferendis voluptatem harum necessitatibus delectus inventore."}, 
{"id":6,"name":"Maiores in accusantium aliquam doloremque.","body":"Dolores adipisci porro sunt velit dolores omnis omnis. Reiciendis a maiores nesciunt qui vel necessitatibus nisi. Facere est iste distinctio ipsam labore pariatur. Modi unde consequuntur veniam alias minima. Dignissimos voluptatem iste quas quidem et."}, 
{"id":7,"name":"Ea et nesciunt quia asperiores sed quia dicta.","body":"Facilis eum magnam inventore perferendis dignissimos consequatur. Dolorum est illum reiciendis sunt at et labore."}, 
{"id":8,"name":"Nemo distinctio harum autem et velit voluptates.","body":"Impedit ea tenetur sapiente sapiente ipsa maiores nam omnis. Eos nisi dignissimos pariatur nam."}, 
{"id":9,"name":"Omnis quis et quia est veniam aut sunt porro.","body":"Eos rem itaque enim eum. Suscipit eaque harum consequatur quaerat. Itaque unde exercitationem saepe harum. Fugit ducimus et et ex."}]} 

任務組成：

<template> 
    <ul> 
    <li v-for="task in tasks"> 
     {{ task.name }} 
    </li> 
    </ul> 
</template> 

    <script> 
    export default { 
     data() { 
     return { 
      tasks: [] 
     } 
     }, 

    ready() { 
    this.$http.get('/api/tasks').then((response) => { 
     this.tasks = response.data 
    }, (response) => { 
     // error 
    }) 
    } 
} 

當我嘗試將track-by="$index"添加到v-for時，它創建了2,000 <li> s，其中沒有任何內容。它從哪裏獲得2000？！

任何幫助表示讚賞。

Answer 1

試試這個：

ready() { 
    this.$http.get('/api/tasks').then((response) => { 
     this.tasks = response.data.data 
    }, (response) => { 
     // error 
    }) 
} 

Answer 2

好像this.$http.get沒有得到它作爲JSON和你只是v-for通過串荷蘭國際集團因爲在它的2206個字符。

你的服務器是否發送正確的http頭文件？

一個臨時的解決可能是：

this.tasks = JSON.parse(response.data.data) 

雖然，你真的應該考慮得到正確設置HTTP標頭。