Vuejs рассчитать соотношение сторон изображения

Здравствуйте, ребята. Мне нужна помощь в вычислении пропорций пикселя. У меня есть приложение vue, которое принимает ширину и высоту, и я хотел бы, чтобы отключенное текстовое поле отображало соотношение сторон и отображало его как 16: 9, и так далее, в зависимости от того, что соотношение сторон имеет введенную ширину и высоту. У меня есть это, но я не знаю, как это сделать.

   <?php ob_start();
session_start();

include('head.php');
include('header.php');
?>
<div id="signUpFormContainer">
<div id="signUpForm">
<h2>Add A Display</h2>
<!--Display Name -->
<div class="inputDiv">
<p v-show="validName==true && nameexists==false">Display Name* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validName==false && sub=='1' && nameexists==false">Display Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a display name</span></i></p>
<p v-show='validName==false && sub!="1" && nameexists==false'>Display Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a display name</span></i></p>
<p v-show='sub=="1" && nameexists==true'>Display Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Display Name Already Exists</span></i></p>
<p v-show='sub=="1" && nameexists==true'>Display Name Already Exists</p>
<input v-model="name" placeholder="Display Name" v-on:focus="shownamerequirements">
<ul v-show='disnamer==true'>
<li v-show="validName==false">Please enter a display name</li>
</ul>
</div>
<!--END DISPLAY NAME -->

<!--Width-->
<div class="inputDiv">
<p v-show="widthLength==true && widthHasNum==true && width!=''">Pixel Width* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="widthLength==false && width!='' || widthHasNum==false && width!='' || width=='' && sub==1">Pixel Width* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a width. Width can contain only numbers</span></i></p>
<p v-show="width=='' && sub==0">Pixel Width* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Width can contain only numbers</span></i></p>
<input v-model="width" placeholder="Pixel Width" v-on:focus="showwidthrequirements" id="width">
<ul v-show="diswidthr==true">
<li v-show="widthLength==false">Please enter pixel width of your display</li>
<li v-show="widthHasNum==false || width==''"> Width must contain only numbers</li>
<li v-show="widthLength==false">Note: Pixel width is typically an even number</li>
</ul>
</div>
<!-- End Width -->

<!-- Height -->
<div class="inputDiv">
<p v-show="heightLength==true && heightHasNum==true && height!=''">Pixel Height* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="heightLength==false && height!='' || heightHasNum==false && height!='' || height=='' && sub==1">Pixel Height* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a height. Height can contain only numbers</span></i></p>
<p v-show="height=='' && sub==0">Pixel Height* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Height can contain only numbers</span></i></p>
<input v-model="height" placeholder="Pixel Height" v-on:focus="showheightrequirements" id="height">
<ul v-show="disheightr==true">
<li v-show="heightLength==false">Please enter the pixel height of your display</li>
<li v-show="heightHasNum==false || height==''"> Height must contain only numbers</li>
<li v-show="heightLength==false">Note: Pixel height is typically an even number</li>
</ul>
</div>

<!-- End Height -->

<!--Aspect Ratio -->
<p v-show="sub==1 && aspectratio!=''">{{aspectratio}}</p>
<!--End Aspect Ratio -->

<!-- File Format -->
<div class="inputDiv">
<p v-show="fileformat!=''">File Format* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="fileformat=='' && sub==1">File Format* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please select your default file format</span></i></p>
<p v-show="fileformat=='' && sub!=1">File Format* <i  class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please select your default file format</span></i></p>
<select v-model="fileformat" id="fileformat">
<option disabled value="">Please select a default file format</option>
<option value="wmv">WMV</option>
<option value="mp4">MP4</option>
<option value="jpg">JPG</option>
</select>
</div>
<!-- End File Format-->
<div class="inputButton">
<input v-on:click="addDisplay" id="addButton" type="button" value="Add Display"></input>
</div>
</div>
<div id="footerContainer"></div>
</div>
<script>
var app = new Vue({
el: '#signUpForm',
data: {
name: '',
width: '',
height: '',
sub: '',
disnamer: '',
diswidthr: '',
disheightr: '',
nameexists:'',
aspectratio:'',
fileformat:''
},
computed: {
widthLength: function() {
this.width=this.width.replace(/\s/g, '');
if(this.width.trim().length >= 1) {
return true;
} else {
return false;
}
},
heightLength: function() {
this.height=this.height.replace(/\s/g, '');
if(this.height.trim().length >= 1) {
return true;
} else {
return false;
}
},
widthHasNum: function(){
this.width=this.width.replace(/[^0-9]+/g, '');
if(/[\d]/.test(this.width)){return true;} else{return false;}
},
heightHasNum: function(){
this.height=this.height.replace(/[^0-9]+/g, '');
if(/[\d]/.test(this.height)){return true;} else{return false;}
},
validName: function(){
this.name=this.name.replace(/\s/g, '');
if(this.name.trim().length >= 1) {
return true;
} else {
return false;
}
}
},
created: function() {
this.nameexists=false;
},
watch: {
},
methods: {
addDisplay: function() {
this.sub=1;
if(this.width!='' && this.height!=''){
this.aspectratio=this.width/this.height;}
if(this.widthLength && this.widthHasNum && this.heightLength && this.heightHasNum && this.validName && this.fileformat!='') {
var jsonString = JSON.stringify({
name: this.name,
width: this.width,
height: this.height,
fileformat: this.fileformat
});
$.ajax({
url: 'addDisplayBackend.php',
dataType: 'json',
type: 'post',
contentType: 'application/json',
dataType: 'json',
data: jsonString,
error: function(data){
alert('error');
//                window.location.href='successfullycreated.php';
},
success: function(data){
console.log(data);
alert('success');
this.userexist=data.userexist;
if(this.nameexist==false){window.location.href='addeddisplay.php';}
}.bind(this)
});
}
},
shownamerequirements: function(){
this.sub=0;
this.disnamer=true;
this.diswidthr=false;
this.disheightr=false;
},
showheightrequirements: function(){
this.sub=0;
this.diswidthr=false;
this.disheightr=true;
this.disnamer=false;
},
showwidthrequirements: function(){
this.sub=0;
this.diswidthr=true;
this.disheightr=false;
this.disnamer=false;
}
}
});

</script>
<?php include('foot.php');?>