Vue.js模板中$refs使用问题：非v-model绑定输入值无法自动更新

嘿，我明白你遇到的问题啦！你把showInput写成了methods里的方法，但模板里直接用{{showInput}}的话，它只会在组件初始化的时候执行一次，之后输入框内容变化时，这个方法不会自动重新调用，所以你看不到实时更新的内容。

下面给你两种可行的解决思路，都是基于Vue的响应式机制来实现实时同步：

方法一：通过输入事件同步到响应式变量 #

这是最直接的方式，利用输入框的input事件把最新值同步到data里的响应式变量，这样模板就能自动更新了。

1. 首先在组件的data里定义一个响应式变量：

data() {
  return {
    inputValue: '' // 用来存储输入框的实时值
  }
}

2. 给输入框绑定input事件，同时保留你的ref属性：

<div class="form-group m-b-40">
  <input type="text" class="form-control" id="name" ref="name" required @input="syncInputValue">
</div>
{{inputValue}}

3. 在methods里添加同步值的方法：

methods: {
  syncInputValue() {
    // 通过ref获取输入框的最新值，赋值给响应式变量
    this.inputValue = this.$refs.name.value
  }
}

这样每次你在输入框里输入内容时，input事件会触发syncInputValue方法，把最新值同步到inputValue，而因为inputValue是响应式的，模板会自动更新显示最新内容。

方法二：不用ref，直接通过事件对象获取值 #

如果你不需要ref做其他操作，其实可以更简化，直接在事件里通过$event获取输入框的值：

<div class="form-group m-b-40">
  <input type="text" class="form-control" id="name" required @input="inputValue = $event.target.value">
</div>
{{inputValue}}

这种方式连methods都不用写，直接把值同步到inputValue，同样能实现实时显示的效果。

核心原因就是：Vue的模板只会对响应式数据的变化做出自动更新，你之前的方法只是一次性获取了值，没有把值绑定到响应式变量上，所以无法触发更新。

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