VUEのForloopsでhtmlタグを作成

Question

このコードは、jsonオブジェクトが渡されるejsテンプレート用です.VUE.jsで同様のテーブルを作成しようとしていますが、vue for vueはliタグ。私が望むのは、ejsの下のコードで行われているように、VUEのforループを使ってhtmlの束全体を作成できることです。何か案は？

<%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

だけでJSの配列とすべてが細かく動作するようjson2設定してください。また、Vue反応性が必要な場合は、入力にv-model="obj.pkid"を設定することを忘れないでください。

<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>