How can I integrate this component in my vue.js?-CodePudding

I am trying to add this component in my App but as vue component but for some reason, the page is not loading. Source of component : https://codepen.io/jessicachou/details/bjaZmY

I am getting the following warnings :

Unresolved function or method isNumeric() (line 35)
Unused parameter e (line 32)

-Argument type string is not assignable to parameter type object | undefined Type string is not assignable to type object (32)

<template>
  <div >
    <h2>How old is your dog in human years?</h2>
    <div >
      <input  id="input" placeholder="5">
    </div>
    <div >
      <div >
        <h2  data-default="total-small-dog">40</h2>
        <img  src="..." alt=".."/>
        <h3 >Small dog</h3>
      </div>
      <div >
        <h2  data-default="45">45</h2>
        <img  src="..." alt="..."/>
        <h3 >Medium dog</h3>
      </div>
      <div >
        <h2  data-default="49">49</h2>
        <img  src="..." alt=".."/>
        <h3 >Big dog</h3>
      </div>
    </div>
    <p >*No dogs were harmed in the creation of this calculator.</p>
  </div>
</template>

<script>
export default {
 name: 'DogAgeCalculater'
}
```line(32)```$('.num-age').keyup(function (e) {
 var num, smallAge, mediumAge, bigAge
 num = $(this).val()
```line(35)``` if (!$.isNumeric(num)) {
   return
 }
 smallAge = (num * 4)   20
 mediumAge = (num * 6)   15
 bigAge = (num * 9)   4

 $('total-small-dog').html(smallAge)
 $('total-medium-dog').html(mediumAge)
 $('total-big-dog').html(bigAge)
})
</script>

.content {
 background-color: #caefec;
 font-family: Arial,sans-serif;
 padding: 20px;
 max-width: 800px;
 margin: auto;
}

.center {
 text-align: center;
}

h2 {
 color: #03363d;
 font-size: 32px;
 line-height: 1.2;
}

.num-age {
 appearance: none;
 -webkit-appearance: none;
 border-radius: 12px;
 background-color: #fafafa;
 box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
 border: solid 2px #f3f3f3;
 color: #03363d;
 font: 28px/1.16 Arial,sans-serif;
 outline: 0;
 margin: 10px 0;
 max-width: 200px;
 padding: 10px;
}

.num-result {
 display: inline-block;
 width: 32%;
 vertical-align: top;
}

.disclaimer {
 color: #03363d;
 font-size: 14px;
}
.image-dog {
 max-width: 100%;
 max-height: 100px;
}

CodePudding user response：

With plain JS:

<style>
.content {
 background-color: #caefec;
 font-family: Arial,sans-serif;
 padding: 20px;
 max-width: 800px;
 margin: auto;
}
.center {
 text-align: center;
}
h2 {
 color: #03363d;
 font-size: 32px;
 line-height: 1.2;
}
.num-age {
 appearance: none;
 -webkit-appearance: none;
 border-radius: 12px;
 background-color: #fafafa;
 box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
 border: solid 2px #f3f3f3;
 color: #03363d;
 font: 28px/1.16 Arial,sans-serif;
 outline: 0;
 margin: 10px 0;
 max-width: 200px;
 padding: 10px;
}
.num-result {
 display: inline-block;
 width: 32%;
 vertical-align: top;
}

.disclaimer {
 color: #03363d;
 font-size: 14px;
}
.image-dog {
 max-width: 100%;
 max-height: 100px;
}
</style>
<div >
  <h2>How old is your dog in human years?</h2>
  <div >
    <input  id="input" placeholder="5">
  </div>
  <div >
    <div >
      <h2  data-default="total-small-dog">40</h2>
      <img  src="..." alt=".."/>
      <h3 >Small dog</h3>
    </div>
    <div >
      <h2  data-default="45">45</h2>
      <img  src="..." alt="..."/>
      <h3 >Medium dog</h3>
    </div>
    <div >
      <h2  data-default="49">49</h2>
      <img  src="..." alt=".."/>
      <h3 >Big dog</h3>
    </div>
  </div>
  <p >*No dogs were harmed in the creation of this calculator.</p>
</div>
<script>
  document.querySelector("#input").addEventListener('keyup', (event) => {
  let num, smallAge, mediumAge, bigAge
  num = event.target.value
  if (!isNaN(num)) {
    smallAge = (num * 4)   20
    mediumAge = (num * 6)   15
    bigAge = (num * 9)   4
    document.querySelector(".total-small-dog").innerText = smallAge
    document.querySelector(".total-medium-dog").innerText = mediumAge
    document.querySelector(".total-big-dog").innerText = bigAge
  }
})
</script>

CodePudding user response：

One way would be like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      years: {
        small: 40,
        medium: 45,
        big: 49
      },
      year: 5
    }
  },
  methods: {
    calcYears() {
      this.years.small = (this.year * 4)   20
      this.years.medium = (this.year * 6)   15
      this.years.big = (this.year * 9)   4
    }
  }
})

.content {
 background-color: #caefec;
 font-family: Arial,sans-serif;
 padding: 20px;
 max-width: 800px;
 margin: auto;
}

.center {
 text-align: center;
}

h2 {
 color: #03363d;
 font-size: 32px;
 line-height: 1.2;
}

.num-age {
 appearance: none;
 -webkit-appearance: none;
 border-radius: 12px;
 background-color: #fafafa;
 box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
 border: solid 2px #f3f3f3;
 color: #03363d;
 font: 28px/1.16 Arial,sans-serif;
 outline: 0;
 margin: 10px 0;
 max-width: 200px;
 padding: 10px;
}

.num-result {
 display: inline-block;
 width: 32%;
 vertical-align: top;
}

.disclaimer {
 color: #03363d;
 font-size: 14px;
}
.image-dog {
 max-width: 100%;
 max-height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div >
    <h2>How old is your dog in human years?</h2>
    <div >
      <input type="number" id="input" placeholder="5" v-model="year" @keyup="calcYears" @change="calcYears">
    </div>
    <div >
      <div >
        <h2  data-default="total-small-dog">{{ years.small }}</h2>
        <img  src="..." alt=".."/>
        <h3 >Small dog</h3>
      </div>
      <div >
        <h2  data-default="45" >{{ years.medium }}</h2>
        <img  src="..." alt="..."/>
        <h3 >Medium dog</h3>
      </div>
      <div >
        <h2  data-default="49">{{ years.big }}</h2>
        <img  src="..." alt=".."/>
        <h3 >Big dog</h3>
      </div>
    </div>
    <p >*No dogs were harmed in the creation of this calculator.</p>
  </div>
</div>