Vue.js 如何根据输入的id编号获取对应文本框的输入值

问题原因 #

• 你使用Vue3的setup()语法时，错误使用this访问响应式变量，且未声明textdata1、textdata2、searchid三个双向绑定需要的响应式变量
• 点击查询的逻辑没有做id匹配判断，直接对两个变量赋值，不符合需求
• 模板仅需要一个展示结果的变量，不需要额外声明冗余的id2data

修正后模板代码 #

<input  v-model="textdata1" id="1" type="text" placeholder="i am id1, show my value">
<input v-model="textdata2" id="2" type="text" placeholder="i am id2, show my value">
<input v-model="searchid"  type="text" placeholder="which ids data you want, 1 or 2 ">
<button  @click="getvalue">RECEIVE</button>
<div>show value of id 1or2 here: {{result}}</div>

修正后JS逻辑 #

<script>
import { defineComponent,ref } from 'vue'

export default defineComponent({
  setup() {
    // 声明所有响应式变量
    const textdata1 = ref('')
    const textdata2 = ref('')
    const searchid = ref('')
    const result = ref('')

    function getvalue(){
      // 按输入的id匹配对应值
      switch(searchid.value) {
        case '1':
          result.value = textdata1.value
          break
        case '2':
          result.value = textdata2.value
          break
        default:
          result.value = '请输入有效的id：1或2'
      }
    }

    return {
      textdata1,
      textdata2,
      searchid,
      result,
      getvalue
    }
  }
})
</script>

注意事项 #

• Vue3 setup() 作用域内没有指向组件实例的this，访问/修改ref声明的变量需要加.value后缀
• 所有用v-model绑定的变量都需要提前声明为响应式变量，再在return中暴露给模板使用

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