[vue.js] vueコンポーネントでv-ifを使って要素を切り替えたい

前提・やりたいこと

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件

ベストアンサー

HTMLのv-ifですがこのような感じでよいかと思います。

html
1<div v-if="isIE">
2  ...
3</div
4<div v-else>
5  ...
6</div>

script部分はuser agentは途中で変化もしないと思いますので、インスタンス生成時に一度実行すれば良いと思います。

javascript
1{
2  data() {
3    return {
4      isIE: false
5    }
6  },
7  created() {
8    this.isIE = navigator.userAgent.indexOf("Trident") !== -1
9  }
10}