Hice una página simple con vue2, es un conversor de binario a decimal. Pero cuando envío el valor binario cuando está en formato HTML, los datos desaparecen. El componente
<template> <div class="bar"> <input id="str" type="text"> <button type="submit" @click="toArray">Converter</button> <div id="exit">{{dec}}</div> </div> </template> <script> export default { data(){ return { arr: [], dec: '' } }, methods: { toArray(){ let str = document.getElementById('str').value; var myArr = String(str).split("").map((str)=>{ return Number(str) }) this.arr = myArr; let decimal = 0; for(let i = 0; i < this.arr.length; i++){ decimal = decimal + (this.arr[i]*(2**(this.arr.length-i-1))) } this.dec = decimal } } } </script>La página de vue donde se llama el componente.
<template> <form class="Contador"> <div class="container"> <div> <conversor/> </div> </div> </form> </template>Su componente está en forma, por lo que debe dejar de enviar, intente con @click.prevent y puede usar v-model para su entrada:
Vue.component('conversor', { template: ` <div class="bar"> <input v-model="val" type="text"> <button type="submit" @click.prevent="toArray">Converter</button> <div id="exit">{{ dec }}</div> </div> `, data(){ return { arr: [], dec: '', val: '' } }, methods: { toArray(){ this.arr = String(this.val).split("").map((str)=>{ return Number(str) }) let decimal = 0; for(let i = 0; i < this.arr.length; i++){ decimal = decimal + (this.arr[i]*(2**(this.arr.length-i-1))) } this.dec = decimal } } }) new Vue({ el: '#demo', }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <form class="Contador"> <div class="container"> <conversor/> </div> </form> </div>