Bearbeiten von Komponentenvorlage nach dem Erstellen

Question

Ich habe ein Array von Elementen (Orte) und eine Komponente, die ich für jedes Element dieses Arrays anzeigen, Das Problem ist, ich möchte den HTML-Code der Komponente in Abhängigkeit von jedem Element aktualisieren; Ich habe versucht, erstellt und montiert zu verwenden, aber es hat gut funktioniert;

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

Sie tun es falsch. Einige Dinge:

1. Für die Reaktionszeit verwenden Sie http://www.w3schools.com/cssref/css3_pr_mediaquery.asp anstelle von JS. Viel effizienter und viel richtiger.

2. Es ist vielleicht nicht in diesem Fall anwendbar, aber in VueJS, wenn Sie etwas von etwas zeigen möchten, geben Sie nur v-if=condition und das ist es. In Ihrem Fall sollten Sie unbedingt die CSS-Klasse verwenden, die Ihre Elemente, die Sie von JS hinzufügen, derzeit nur auf Bildschirmen über 768px anzeigt.