Forloops in VUE zum Erstellen von HTML-Tags

Question

Dieser Code ist für eine EJS-Vorlage, in der ein JSON-Objekt übergeben wird. Ich versuche, eine ähnliche Tabelle in VUE.js jedoch V-for in Vue scheint nur mit li-Tags zu arbeiten . Was ich will, ist in der Lage, eine ganze Reihe von HTML mit einer for-Schleife in VUE zu erstellen, genau wie es in dem Code unten in ejs getan wird. Irgendwelche Ideen?

<%var json2 = json%> 
      <%for(var i = 0; i < json2.length; i++) { %> 
      <%var obj = json2[i];%> 
      <tr> 
      <form action="/d" class="f" method="POST" id="target"> 
      <td> 
       <%= obj.pkid%> 
       <input type="hidden" name="pkid" value="<%=obj.pkid%>" enctype="application/json" > 
      </td> 
      <td> 
       <%= obj.room%> 
      </td> 
      <td> 
       <%= obj.facility%> 
      </td> 
      <td> 
       <%= obj.city%> 
      </td> 
      <td> 
       <%= obj.state%> 
      </td> 
      <td> 
       <%= obj.address%> 
      </td> 
      </form> 
      </tr> 
     <%}%> 

Answer 1

Stellen Sie einfach sicher, json2 als JS-Array zu setzen und alles wird fein arbeiten. Vergessen Sie auch nicht, v-model="obj.pkid" auf Ihre Eingabe zu setzen, wenn Sie Vue Reaktivität wünschen.

<tr v-for="obj in json2"> 
    <form action="/d" class="f" method="POST" id="target"> 
     <td> 
     {{ obj.pkid }} 
     <input type="hidden" name="pkid" v-model="obj.pkid" enctype="application/json"> 
     </td> 
     <td> 
     {{ obj.room }} 
     </td> 
     <td> 
     {{ obj.facility }} 
     </td> 
     <td> 
     {{ obj.city }} 
     </td> 
     <td> 
     {{ obj.state }} 
     </td> 
     <td> 
     {{ obj.address }} 
     </td> 
    </form> 
</tr>