How to manipulate DOM in Vue dynamically and detect user OS

Question

I am trying to detect user OS using the User Agent in Vue. I've tried everything I know like using document and getElementById and I tried to use ref's as shown below, but I just can't get it to work. Any help is welcomed, thank you.

<template>
<v-container>
  <v-container fluid d-flex justify-center align-center flex-xs-column class="grey lighten-3">
    <div class="d-flex justify-space-between align-center flex-xs-column">
      <div class="d-flex flex-column">
      HERE ---><h1 ref="downloadTitle">yep</h1> <----
      HERE ---><p ref="downloadDesc">nope</p> <----
      <!-- <h1 v-if="navigator.userAgent.includes('win') == true"> Download For Windows </h1>
      <h1 v-if="navigator.userAgent.includes('Linux') == true"> Download For Linux </h1>
      <h1 v-if="navigator.userAgent.includes('Android') == true || navigator.userAgent.includes('like Mac') == true"> Not Available For Download On This Device </h1> -->
      <v-btn dark min-width="100" max-width="20%" class="ma-auto">Download</v-btn>
      </div>
      <v-divider vertical></v-divider>
      <v-img src="https://gamepedia.cursecdn.com/minecraft_gamepedia/6/62/Dirt_JE2_BE1.png" max-height="10%" class="ma-8"></v-img>
    </div>
  </v-container>
  <v-divider class="grey"></v-divider>
  <v-container fluid d-flex justify-center class="mb-12">
    <div class="d-flex flex-column justify-center text-center">
      <h1 class="ma-4"> Download For Your Other Devices </h1>
      <div class="d-flex justify-space-around">
      <v-card min-width="40%" class="text-center d-inline-block">
        <v-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/1024px-Windows_logo_-_2012.svg.png" aspect-ratio="1" max-width="100" contain class="ma-auto mt-4"></v-img>
        <v-card-subtitle class="d-block text-wrap ma-auto">Download For Windows</v-card-subtitle>
        <v-card-actions>
          <v-btn dark class="ma-auto" href="">Download</v-btn>
        </v-card-actions>
      </v-card>
      <v-card min-width="40%" class="text-center d-inline-block">
        <v-img src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_linux-512.png" aspect-ratio="1" max-width="100" contain class="ma-auto mt-4"></v-img>
        <v-card-subtitle class="d-block text-wrap text-center">Download For Linux</v-card-subtitle>
        <v-card-actions>
          <v-btn dark class="ma-auto" href="">Download</v-btn>
        </v-card-actions>
      </v-card>
      </div>
    </div>
  </v-container>
</v-container>

<script>
  export default {
        name: "Downloads",
        methods: {
          detectOS: function detectOS() {
            var name = "Unknown OS"; 
            var download;
            var desc;
            if (navigator.userAgent.includes("win") != -1)  {
                name = "Windows";
            }
            else if (navigator.userAgent.includes("Mac") != -1) {
                name = "Mac"; 
            }
            else if (navigator.userAgent.includes("Linux") != -1) {
                name = "Linux"; 
            }
            else if (navigator.userAgent.includes("Android") != -1) {
                name = "Android OS"; 
            }
            else if (navigator.userAgent.includes("like Mac") != -1)  {
                name = "iOS";
            }
            else {
                name;
            };
        },
        mounted() {
          detectOS();
          this.$ref.downloadTitle.innerHTML = download;
          this.downloadDesc.innerHTML = desc;
          alert("hey");
        }
      };
</script>

<script scoped></script>

I've tried putting it all in mounted and created, however nothing works. Thanks in advance!

Did you try console.log('Window.navigator', window.navigator.appVersion) ? — Anatoly, May 05 '20 at 22:28

AlekseyHoffman · Answer 1 · 2020-05-05T22:34:11.200

Of course nothing works, mate, your detectOS method doesn't return or update anything.

Also what is all this code in the detectOS method?

if (navigator.userAgent.includes("win") != -1)
...

This code doesn't make any sense, and it's not how you get OS name. You can learn how to do it on this page

After you fix this, do the folowing:

Step 1:

Move all your properties to data(). Mounted hook cannot access your desc, download, and name properties inside the detectOS method.

data () {
  return {
    desc: '',
    download: '',
    osName: 'Unknown OS'
  }
},
methods: {
...

Step 2:

Make sure your detectOS method gets OS name properly. Log the name variable and make sure is not still equal to "Unknown OS"

...
else {
 name;
};
console.log(name)

If it's still equals to "Unknown OS" it means you're still not getting the OS name properly.

Step 3:

Update the osName property so that other methods can use it.

data () {
  return {
    desc: '',
    download: '',
    osName: 'Unknown OS'
  }
},
methods: {
  detectOS() {
     // Get the OS name
     ...

     // Update property
     this.osName = name
  }
}

oh my bad, i had old code and then i changed it to use .include() thats why i makes no sense — Jacob Bruce, May 05 '20 at 23:02

score 0 · Answer 2 · answered May 05 '20 at 22:34

Like here

  data: {
    userAgent:"",
    userOs:""
    },
  mounted() {
    console.log('userAgent; ',navigator.userAgent);

    this.userAgent = navigator.userAgent || '';
    this.userOs = navigator.platform || '';

    let osType = this.userOs.toLowerCase();

    if(osType.includes('win')) alert('win');
    else if(osType.includes('mac')) alert('mac');
    else if(osType.includes('ios')) alert('ios');
    else if(osType.includes('android')) alert('android');
    else if(osType.includes('linux')) alert('linux');
    else  alert('unkown os');
    }

How to manipulate DOM in Vue dynamically and detect user OS

2 Answers2

Step 1:

Step 2:

Step 3: