Question

这是我的Vue

<div class="drag">
        <h2>List 1 Draggable</h2>
        <draggable id="cat1" v-model="list" :move="checkMove" class="dragArea" :options="{group:'people'}">
            <div v-for="element in list">${ element.name }</div>
        </draggable>
        <h2>List 2 Draggable</h2>
        <draggable id="cat2" v-model="list2" :move="checkMove" class="dragArea" :options="{group:'people'}">
            <div v-for="element in list2">${ element.name }</div>
            <p>another</p>
        </draggable>
    </div>
    <script>

        var vm = new Vue({
            el: "#main",
            delimiters:['${', '}'],
            data: {
                list: [{
                    name: "John"
                }, {
                    name: "Joao"
                }, {
                    name: "Jean"
                }],
                list2: [{
                    name: "Juan"
                }, {
                    name: "Edgard"
                }, {
                    name: "Johnson"
                }]
            }

            }
      </script>

这很有效。列表中的数据显示正确且可拖动。现在我想将以下dict传递给来自flask的数据对象，以便我可以渲染它。

使用{{ data }}呈现时的对象如下所示：

{u'uncategorized': [{'name': u''}, {'name': u'first'}, {'name': u'another'}]}

所以你可以看到它与传递给数据的对象的格式相同：

{
                    list: [{
                        name: "John"
                    }, {
                        name: "Joao"
                    }, {
                        name: "Jean"
                    }],
                    list2: [{
                        name: "Juan"
                    }, {
                        name: "Edgard"
                    }, {
                        name: "Johnson"
                    }]
                }

但是当我尝试在vue中替换data: {{ data }}时，它无法正确渲染。

那么我该如何处理烧瓶中的数据对象以使Vue“接受”呢？

Answer 1

首先，在这样的组件中渲染数据通常是一种不好的做法。最好的选择是从api获取数据以便更好地解耦，但是如果你真的必须在模板中渲染数据，你应该在自定义属性内部而不是在组件内部渲染数据，就像你在使用{ {1}}。

现在到了实际问题。您正在尝试将字符串中的python字典呈现为一个需要json格式的地方，这显然不会起作用。你必须先将它转换为json，你可以使用json module。

从文档中获取的示例如下所示：

:option

请记住，词典的逻辑结构必须与预期的json相同，而不仅仅是光学。

如何在vuejs v-for draggable list中渲染flask jinja2对象？

1 个答案: