Vue.js 3如何将GET请求返回的数据预填充到表单输入框中

问题原因及修复方案 #

1. 模板属性绑定语法错误 #

Vue不支持在HTML原生属性的赋值字符串中使用{{ }}插值语法，要给value属性绑定响应式变量，必须使用v-bind:value或者简写:value。原代码中value="{{ name }}"的写法无法被Vue解析，只会将{{ name }}作为普通字符串渲染到输入框中。

修正后的input代码：

<input id="name" type="text" v-bind:placeholder="$t('message.NamePlaceholder')" :value="name" required>

如果需要双向绑定，也可以直接用v-model="name"替换:value。

2. 异步请求赋值逻辑位置错误 #

axios发起的GET请求是异步操作，你将this.name = this.userInformation.Name写在then回调外部时，请求还未返回响应，userInformation还是初始的空对象，读取Name属性只能拿到undefined，必须将赋值逻辑放到then回调内部，等待请求返回后再执行。

3. methods属性语法错误 #

原代码中methods () {的写法错误，methods是组件的对象类型属性，应该用冒号赋值而不是函数定义的写法，正确写法是methods: {。

修正后的完整script代码 #

<script>
export default {
  data () {
    return {
      userInformation: {},
      name: "",
   }
},
mounted () {
  this.getUserInformation();
},
methods: {
  getUserInformation() {
    this.$axios({
      method: 'get',
      url: 'http://127.0.0.1:8000/api/get_user_information',
    }).then(response => {
      this.userInformation = response.data;
      // 赋值逻辑移到回调内部
      this.name = this.userInformation.Name;
    });
   }
 },
}
</script>

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