How to manipulate DOM in Vue dynamically and detect user OS - vue.js

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!

Answer 1

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
}
}

Answer 2

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');
}