前提・やりたいこと
vueコンポーネントでv-ifを使って、IEとそれ以外のときに要素を切り替えたいです。
以下コードです。
lang
1Vue.component('waypoint-warp', { 2 template: ` 3 <div class="js-lazy-target" v-bind:class="{'animated fadeIn' : isInView}" style="opacity:100" v-if="isIE == 'true'"> 4 <v-waypoint @waypoint="waypointHandler" ref="waypointEvent"></v-waypoint> 5 <slot></slot> 6 <div id="isIE">{{val.isIE}}</div> 7 </div> 8 <div class="js-lazy-target" v-bind:class="{'animated fadeInUp' : isInView}" style="opacity:0" v-if="isIE == 'false'"> 9 <v-waypoint @waypoint="waypointHandler" ref="waypointEvent"></v-waypoint> 10 <slot></slot> 11 <div id="isIE">{{val.isIE}}</div> 12 </div> 13 `, 14 data() { 15 return { 16 isInView: false, 17 isIE: 'false' 18 }; 19 }, 20 computed: { 21 isIE: window.onload = function(){ 22 if(navigator.userAgent.indexOf("Trident") != -1){ 23 document.getElementById('isIE').innerText = 'true' 24 } else { 25 document.getElementById('isIE').innerText = 'false' 26 } 27 } 28 }, 29 methods: { 30 waypointHandler(direction, going) { 31 if (going == "in") { 32 this.isInView = true; 33 this.$refs.waypointEvent.$destroy() 34 } 35 }, 36 }, 37});
isIEの文字列を変換するところまでは動くのですが、完全のv-ifによる分岐が動きません。いろいろ調べているのですが、この構造の場合どのように書けばいいかわからず、こちらで質問させていただいた次第です。
テンプレートは仮のものなので気にしないでください。
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/08 01:31