Question

我有一个项目（地点）数组和我为这个数组的每个项目显示的组件，问题是我想根据每个项目更新组件的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

你做错了。几件事：

对于响应性使用http://www.w3schools.com/cssref/css3_pr_mediaquery.asp而不是JS。更有效，更正确的做法。
在这种情况下可能不适用，但在VueJS中，如果你想给出一些显示内容的条件，只需使用v-if=condition即可。在你的情况下，你肯定应该使用CSS类，它将显示你目前仅在768px以上的屏幕上由JS添加的元素。

在创建组件模板后编辑它

1 个答案: