Vue3中如何将列表选中值设置到搜索输入框？

你的代码核心问题是变量名冲突，导致赋值操作没作用到绑定输入框的响应式变量上：

你声明的响应式变量是project = ref('')，但在selectProject函数里，你把参数名也设为了project。在函数内部，局部参数的优先级高于外部变量，所以你写的project.value = project.name，实际上是在给点击的那个普通结果对象（参数project）添加value属性，完全没修改到绑定输入框的响应式project变量。

修复代码 #

只需要修改函数的参数名，避免和外部响应式变量重名即可：

const selectProject = (item) => {
  project.value = item.name
  selectedProject.value = item.id
  results.value = []
}

模板部分无需改动，依然保持：

<input type="text" name="project" v-model="project" />
<div :class="['result',{hidden:!results?.length}]" >
  <ul>
    <li v-for="(result) in results" @click="selectProject(result)">
       {{ result.name}}
    </li>
  </ul>
</div>

这样点击列表项时，就能正确把选中项的name赋值给响应式的project变量，输入框也会同步显示选中值了。

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