如何在vuejs v-for draggable list中渲染瓶子jinja2對象？

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> 

This works great。列表中的數據正確顯示並且可拖動。現在我想將下列字典傳遞給燒瓶中的數據對象，以便我可以渲染它。

對象時只用{{ 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獲取數據以獲得更好的分離效果，但是如果您確實需要在模板中呈現數據，則應該將其呈現在自定義屬性中而不是組件內，例如您正在使用:option 。

現在到實際的問題。你正試圖將一個Python字典渲染成一個json格式的地方，這顯然不會奏效。您必須先將其轉換爲json，您可以使用json module。

來自實例文檔拍攝應該是這樣的：

import json 
json.dumps({"c": 0, "b": 0, "a": 0}) 

請記住，你的字典的邏輯結構必須與您的預期JSON，不只是光。