Find cube of individual element given by user. (Vue js)

Question

I want user to enter a number then it will find the cube of it. Also I have to show the cube of each individual element of the output.

For eg. user enters 3. first output should be 27 then I want to show the cube of 2 and 7 individually.

Here's what I came up with... https://jsfiddle.net/ods0621f/

<div id="app">
  <input v-model='mainNumber' placeholder='Enter a number.'>
  <button v-on:click="cube">Submit</button>
  <p>
    Cube of the number is: {{ mainNumber }} <br>
  </p>
  <p v-for="index in methods">
  {{ index }}
  </p>
</div>

new Vue({
  el: "#app",
  data: {
    mainNumber: ''
  },
  methods: {
    cube: function(event){
    var allowedInput = /^[0-9]/;
    if (this.mainNumber.match(allowedInput)){
    this.mainNumber = this.mainNumber*this.mainNumber*this.mainNumber;
    var splitNumber = (""+this.mainNumber).split("");
    console.log(splitNumber[1]);

    }
    else
    {
    alert('Only digits are allowed.');
    }
    }
    }
})

Answer 1

You were close, although we needed to abstract some functionality such as the cubed algorithm, and to understand Numbers and Strings:

let calc = this.cubeInt(this.mainNumber);
let strToNum = calc.toString().split('').map(Number);

All out cubeInt does is cube the number. strToNum: Converts our Number type into a String type, We split each character into an array, then we use the map function to Number - which will take the first argument being our String, and convert it to a Number.

(I added some template CSS to style the table)

new Vue({
  el: "#app",
  data: {
    mainNumber: null,
    result: null
  },
  methods: {
    cubeInt: function(int) {
     return int*int*int
    },
  	cube: function(event){
      var allowedInput = /^[0-9]/;
      if (this.mainNumber.match(allowedInput)){
        let calc = this.cubeInt(this.mainNumber);
        let strToNum = calc.toString().split('').map(Number);
        this.result = strToNum
      } else {
    		alert('Only digits are allowed.');
    	}
    },
    }
})

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 50%;
  text-align: center;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model='mainNumber' placeholder='Enter a number.'>
  <button v-on:click="cube">Submit</button>
  <p>
    Cube of the number is: {{ this.result }} <br>
  </p>
 <table id="customers">
 <tr v-for="row in 2" :key="item">
   <td v-for="item in result" v-text="row > 1 ? cubeInt(item) : item"></td>
 </tr>
 </table>
</div>