bootstrap-vue中b-input组件通过$refs获取value值为空问题咨询

问题成因 #

b-input是BootstrapVue封装的自定义组件，不是原生<input> DOM元素，通过this.$refs.my_input获取到的是<b-input>的组件实例，而非原生输入框节点，组件实例本身没有直接暴露顶层value属性，因此直接取值会返回空。

解决方法 #

方法1：访问组件实例挂载的原生DOM #

BootstrapVue的b-input组件默认将原生输入框DOM挂载在实例的$el属性下，修改取值逻辑即可：

AlertIt() { alert(this.$refs.my_input.$el.value) }

方法2：使用v-model双向绑定（Vue推荐最佳实践） #

无需操作ref，通过响应式变量绑定输入值，代码可维护性更高：
模板代码：

<template>    
<b-input v-model="inputVal" @keyup.enter="AlertIt" />
</template>

脚本逻辑代码：

export default {
  data() {
    return {
      inputVal: ''
    }
  },
  methods: {
    AlertIt() { alert(this.inputVal) }
  }
}

方法3：读取组件内置的本地值属性 #

多数版本的BootstrapVueb-input组件会将当前输入值存在localValue实例属性下，也可以直接取值：

AlertIt() { alert(this.$refs.my_input.localValue) }

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