Vue強制終了タグ

Question

jsonの100行から動的なフォームを構築しています。各JSONオブジェクトは、入力/日付の/ etc見出しにマップのタイプがあります。

{ name: "input1", label: "input1 ", placeholder: "Enter text", value: "", type: "text"}, 
{ name: "input2", label: "input2", placeholder: "Enter text", value: "", type: "text"}, 
{ name: "title", label: "Title", placeholder: "", value: "", type: "title"}, 
{ name: "input3", label: "input3", placeholder: "Enter date", value: "", type: "date"}, 
{ name: "input4", label: "input4", placeholder: "Enter text", value: "", type: "text"}, 


<template v-for="item in data"> 

    <template v-if="item.type === 'text'"> 
     <label>{{item.label}}</label> 
     <input type="text" v-model="item.value" :placeholder="item.placeholder" /> 
    </template> 

    <template v-if="item.type === 'date'"> 
     <label>{{item.label}}</label> 
     <input type="date" v-model="item.value" :placeholder="item.placeholder" /> 
    </template> 

    <template v-if="item.type === 'title'"> 
     <h1>{{item.label}}</h1> 
    </template> 

</template> 

私はスタイリングのためのdivで一緒にグループセクションにしたいです。だから私は試しました：

{ name: "input1", label: "input1 ", placeholder: "Enter text", value: "", type: "text"}, 
{ name: "input2", label: "input2", placeholder: "Enter text", value: "", type: "text"}, 
{ name: "openDiv", label: "", placeholder: "", value: "", type: "openDiv"}, 
{ name: "title", label: "Title", placeholder: "", value: "", type: "title"}, 
{ name: "input3", label: "input3", placeholder: "Enter date", value: "", type: "date"}, 
{ name: "input4", label: "input4", placeholder: "Enter text", value: "", type: "text"}, 
{ name: "closeDiv", label: "", placeholder: "", value: "", type: "closediv"}, 

<template v-for="item in data"> 

    <template v-if="item.type === 'text'"> 
     <label>{{item.label}}</label> 
     <input type="text" v-model="item.value" :placeholder="item.placeholder" /> 
    </template> 

    <template v-if="item.type === 'date'"> 
     <label>{{item.label}}</label> 
     <input type="date" v-model="item.value" :placeholder="item.placeholder" /> 
    </template> 

    <template v-if="item.type === 'title'"> 
     <h1>{{item.label}}</h1> 
    </template> 

    <template v-if="item.type === 'openDiv'"> 
     <div class="mydiv"> 
    </template> 

    <template v-if="item.type === 'closediv'"> 
     </div> 
    </template> 

</template> 

私のDivは終了タグがありませんので、Vueはコンパイルされません。これについてどうすればいいですか？私はv-htmlを試みましたが、これは近いタグを強制しています。

Answer 1

あなたができることは、データを計算されたプロパティに変換し、その計算されたプロパティの中で、基本的に別の配列の中に配列を作ります。次に、テンプレート内で外側の配列をループし、最初の配列を条件付きでループします。

これは混乱するように聞こえるが、それは実際ではない。私たちのコンポーネントの内部

1. 、我々はこの計算されたセクションの中に新しい計算されたセクション
2. を作り、我々は新しいメソッドを追加し、このセクション内には「formattedData」
3. それを呼び出すことができます、我々はのための変数を作成する必要があります私たちの結果を保存します。
4. divブロック内にあるかどうかを知る必要があるので、これを追跡するために追加の変数が必要です。すべての受信データを超える
5. その後、我々ループ、
6. 我々はtype: "closediv"を見れば、我々は我々がtype: "opendiv"を見れば、我々は一時的なアウト置き換える
7. オープンブロックコンテキストを示す、新しいものと一時変数を置き換えますオープンブロックコンテキストを示す新しい変数を持つ変数
8. tmp配列のサイズが0の場合は、結果の配列に追加する必要があることを意味します。
9. ループした後、結果を返します。
10. データを最終形式に変換して表示する準備が整いました。私たちの<template>セクション内では、我々は<div>か
11. いずれかの広告は、我々は次のループを開始することを、if文があり、このループ内で最初のループ
12. を追加し、このループは、アイテム自体を出力します。

上記のロジックの例：Vueのは無効なHTMLを処理することはできません

// bootstrap the demo 
 
new Vue({ 
 
    el: '#demo', 
 
    template: '#example', 
 
    data: { 
 
    information: [ 
 
{ name: "input1", label: "input1 ", placeholder: "Enter text", value: "", type: "text"}, 
 
{ name: "input2", label: "input2", placeholder: "Enter text", value: "", type: "text"}, 
 
{ name: "openDiv", label: "", placeholder: "", value: "", type: "openDiv"}, 
 
{ name: "title", label: "Title", placeholder: "", value: "", type: "title"}, 
 
{ name: "input3", label: "input3", placeholder: "Enter date", value: "", type: "date"}, 
 
{ name: "input4", label: "input4", placeholder: "Enter text", value: "", type: "text"}, 
 
{ name: "closeDiv", label: "", placeholder: "", value: "", type: "closediv"}, 
 
    ], 
 
    }, 
 
    computed: { 
 
    formattedData() { 
 
     const results = []; 
 
     let tmpObject = { 
 
     wrapped: false, 
 
     values: [], 
 
     }; 
 
     for(let i = 0; i < this.information.length; i++) { 
 
     if(this.information[i].type === 'openDiv') { 
 
      tmpObject = { 
 
      wrapped: true, 
 
      values: [], 
 
      }; 
 
      continue; 
 
     } 
 
     if(this.information[i].type === 'closediv') { 
 
      // TODO Is the capitalization of `closediv` intentional? 
 
      tmpObject = { 
 
      wrapped: false, 
 
      values: [], 
 
      }; 
 
      continue; 
 
     } 
 
     if(tmpObject.values.length === 0) { 
 
      results.push(tmpObject); 
 
     } 
 
     tmpObject.values.push(this.information[i]); 
 
     } 
 
     return results; 
 
    } 
 
    }, 
 
    methods: {}, 
 
});

div.testDiv { 
 
border: red solid 2px; 
 
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script> 
 
<script type="text/x-template" id="example"> 
 
    <div> 
 
    <template v-for="data in formattedData"> 
 

 
     <div v-if="data.wrapped" class="testDiv"> 
 
     <template v-for="item in data.values"> 
 
      <template v-if="item.type === 'text'"> 
 
      <label>{{item.label}}</label> 
 
      <input type="text" v-model="item.value" :placeholder="item.placeholder" /> 
 
      </template> 
 

 
      <template v-if="item.type === 'date'"> 
 
      <label>{{item.label}}</label> 
 
      <input type="date" v-model="item.value" :placeholder="item.placeholder" /> 
 
      </template> 
 

 
      <template v-if="item.type === 'title'"> 
 
      <h1>{{item.label}}</h1> 
 
      </template> 
 
     </template> 
 
     </div> 
 
     <template v-else> 
 
     <template v-for="item in data.values"> 
 
      <template v-if="item.type === 'text'"> 
 
      <label>{{item.label}}</label> 
 
      <input type="text" v-model="item.value" :placeholder="item.placeholder" /> 
 
      </template> 
 

 
      <template v-if="item.type === 'date'"> 
 
      <label>{{item.label}}</label> 
 
      <input type="date" v-model="item.value" :placeholder="item.placeholder" /> 
 
      </template> 
 

 
      <template v-if="item.type === 'title'"> 
 
      <h1>{{item.label}}</h1> 
 
      </template> 
 
     </template> 
 
     </template> 
 
    </template> 
 
    <hr> 
 
    <pre>{{ this.formattedData }}</pre> 
 
    </div> 
 
</script> 
 

 

 

 
<div id="demo"></div>