从 Django 查询集 json 数据中获取特定键的值并将它们传递给 vueJS

Question

我使用 Django2 开发了一个 web 应用程序，前端使用 vue。 在视图函数中，我已经将一些 json 数据渲染到前端。 但是在前端，我不确定如何将 Json 数据中特定键的所有值传递给 JavaScript 字典值。 我曾尝试使用 += 添加数据，但在我的情况下未能获取数据。表中未显示数据。只有第一行可以工作

查看.py：

def Browse_and_adopt(request):
query_results_book = Title.objects.all()
query_results_book_json = serializers.serialize('json', query_results_book)
return render(request, 'main.html', {"query_results_book_json": query_results_book_json})

main.html: {{ row.title }} {{ 行.作者 }}

    <script>
          var query_results_book = {{ query_results_book_json|safe}};

    var book_row = {title: query_results_book[0].fields.title, author: query_results_book[0].fields.author };

    for (var i=1; i < query_results_book.length; i += 1){
        book_row += {title: query_results_book[i].fields.title, author: ''};
    }


    const app = new Vue({
        el: '#app',
        data:() => ({
            filter: '',
            rows: [book_row]
        }),
</script>

示例 json：

{author: "Bill Gates", title: "test"}

如何在 vueJS 中传递这个 json 数据中的所有数据？

Answer 1

因为你有 JSON 对象试试这个。

<div v-for="(item, key) in jsonData" :key="key">
    <p>{{key}} : {{ item }}</p>
</div>

这将为您提供 jsonData 的 keys 和附加到 key 的 item 本身。

另外，如果你想在 keys 的基础上加上一些条件，你可以在循环中使用 key 并制定你的逻辑。

如果选择性项目链接到特定键

<div v-for="(item, key) in jsonData" :key="key">
    <div v-if="key === 'title'">
    <p>{{ item }}</p>
    </div>
</div>

如果你想更多地了解与 vuejs 类似的东西，也可以看看这个， Extracting the text from error object (via response) and manipulate or show it in vue template 它将帮助您了解通过 vuejs 对 json 数据的操作。

Answer 2

问题是您在query_results_book_json 中返回一个标题列表，然后尝试访问它，就好像它只是其中的一项：

var book = {title: query_results_book_json.title, author: query_results_book_json.author};

您必须遍历该结果才能获得您想要的书，或者更改查询以仅返回您需要的书。

编辑：

您可以添加如下内容：

<script>
    var query_results_book = {{ query_results_book_json|safe}};
    var book = query_results_book[0];
</script>

编辑 2（现在您添加了示例）：

为了访问这些字典键，您必须使用 [''] 符号。

例如，要在 javascript 中获取第一本书的标题，您可以这样：

query_results_book[0]['title']

您可以通过记录这样的 for 循环来尝试：

<script>
for (let i = 0; i < query_results_book.length; i++) {  
   console.log(query_results_book[i]['title'])
}
</script>