Vue2中HTML表单提交二进制转十进制值时数据消失如何解决

结果消失是表单原生默认提交行为导致的：

• 转换按钮设置了type="submit"，放在<form>容器内点击时，会触发表单默认的提交刷新逻辑，页面重载后Vue实例重新初始化，data中刚计算赋值的dec结果会被直接重置清空。
• 额外提一句，现有代码通过document.getElementById直接获取DOM取值的写法不符合Vue响应式设计规范，后续迭代容易出现DOM取值和响应式数据不同步的问题，建议改用v-model做输入值双向绑定。

任选以下一种方案即可解决刷新问题：

• 给按钮点击事件加.prevent修饰符，Vue会自动帮你阻止默认提交行为，无需手动写事件拦截逻辑：

  <button type="submit" @click.prevent="toArray">Converter</button>
  

• 直接把按钮的type属性从submit改为button，普通类型按钮不会触发表单提交动作：

  <button type="button" @click="toArray">Converter</button>
  

• 如果后续需要保留form标签做表单校验类逻辑，可以直接在form标签上全局阻止默认提交：

  <form class="Contador" @submit.prevent>
  

<template>
    <div class="bar">
        <input id="str" type="text" v-model="inputStr" placeholder="请输入二进制字符串">
        <button type="button" @click="toArray">Converter</button>
        <div id="exit">转换结果（十进制）：{{dec}}</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            inputStr: '',
            arr: [],
            dec: ''
        }
    },
    methods: {
        toArray(){
            // 增加二进制合法性校验，避免非法输入计算出错
            if(!/^[01]+$/.test(this.inputStr.trim())){
                alert('请输入合法二进制值，仅允许包含0和1')
                return
            }
            this.arr = this.inputStr.split("").map(item => Number(item))
            let decimal = 0;
            for(let i = 0; i < this.arr.length; i++){
                decimal += this.arr[i] * (2 ** (this.arr.length - i - 1))
            }                   
            this.dec = decimal
        }
    }
}
</script>

父组件代码无需调整，替换组件代码后即可正常使用，点击转换按钮不会再出现页面刷新、结果消失的问题。

内容的提问来源于stack exchange，提问作者Hermes