CODEWITHSUNDEEP
vue.jsvue-component
Siempay
Siempay

Reputation: 1002

Editing Component template after creating it

I have an array of items(places) and a component that I show for each Item of this array, The problem is I wanna update the HTML of the component depending on each Item; I tried to use created and mounted but it did work well; 

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

Upvotes: 0

Views: 31

Answers (1)

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13684

You are doing it wrong. Few things:

  1. For responsiveness use http://www.w3schools.com/cssref/css3_pr_mediaquery.asp instead of JS. Much more efficient and much more correct way of doing it.

  2. It is not maybe applicable in this case, but in VueJS if you want to give some conditional of showing something, use just v-if=condition and that's it. In your case you definitely should use CSS class which will show your elements which you are adding by JS currently only on screens above 768px.

Upvotes: 1

Related Questions