作成後のコンポーネントテンプレートの編集

Question

この配列の各Itemに表示される項目（場所）とコンポーネントの配列を持っています。問題は、各Itemに応じてコンポーネントのHTMLを更新することです。私がとを搭載して作成しようとしましたが、うまくいきました。

Vue.component('tpp', { 
props: ['tpp','DistanceMatrix','tpps','calculate'], 
template: `<div class="row tpp" :id="'tpp'+tpp.id" data-duration="" data-distance=""> 
     <div class="section"> 
      <div class="divtxtalign"> 
       <span class="hor_sep"></span> 
      </div> 

       <div class="col-sm-12 image-div" > 
        <img :src="tpp.link" class="image" align="left" width="70%"v :id="'image'+tpp.id"> 

        <table class="table"> 
         <tr><td>Horaire: </td><td>{{tpp.horaire}}</td></tr> 
         <tr><td>Distance: </td><td :id="'d'+tpp.id">{{tpp.distance.text}}</td></tr> 
         <tr><td>Time:  </td><td :id="'t'+tpp.id">{{tpp.duration.text}}</td></tr> 
         <tr><td>Adresse: </td><td>{{tpp.adresse}}</td></tr> 
        </table> 
        <div class=" "> 
         <a :href="'https://www.google.com/maps?saddr=My+Location&daddr='+tpp.lat+','+tpp.lng" role="button" class="button" >Y'accéder</a> 
        </div> 
        <div class=""> 
         <p> 
          {{tpp.disc}}         
         </p> 
        </div> 
      </div> 
     </div> 
    </div>`, 
mounted: function() { 

    if($(window).width()>768){ 
      $('<div></div>').addClass('titre_tpp') 
         .html($('<h4></h4>').text(this.tpp.title)) 
         .insertAfter('#image'+this.tpp.id); 
    } 
},}) 

HTML

Answer 1

あなたはそれが間違ってやっています。いくつか：

1. 応答性のために、JSの代わりにhttp://www.w3schools.com/cssref/css3_pr_mediaquery.aspを使用してください。はるかに効率的ではるかに正確な方法です。

2. この場合は適用されませんが、何かを表示する条件を指定する場合はVueJSでv-if=conditionを使用してください。あなたの場合は、間違いなくあなたが現在768pxを超えるスクリーン上でJSによって追加しているあなたの要素を表示するCSSクラスを使用する必要があります。