Vue新手求助：无需v-model一次性将表单邮箱输入框值更新为API返回结果

嘿，作为Vue新手遇到这种情况很正常，我来给你两个简单可行的方案，直接就能在你的getUser函数的then回调里实现邮箱输入框的更新：

方案1：原生DOM操作（最简单直接） #

因为你的输入框已经有了id="email"，直接用原生JavaScript获取这个元素然后修改它的value属性就行，完全不需要依赖Vue的特殊语法，适合快速解决问题：

getUser: function(id) {
  axios
    .get('/api/users/view.json?id=' + id)
    .then(function(response) {
      // 直接获取输入框并更新值
      document.getElementById('email').value = response.data.user.email;
    })
    .catch(function(error) {
      console.log(error);
    });
}

方案2：Vue的ref属性（更符合Vue开发习惯） #

如果想更贴合Vue的玩法，推荐给输入框添加一个ref标识，这样不用直接操作DOM，而是通过Vue实例来访问元素：
首先修改你的HTML表单，给input加上ref：

<form method="post" action="/user/change/12345">
  <input type="text" name="email" value="?" id="email" ref="emailInput" />
  <button type="submit">Submit</button>
</form>

然后修改getUser函数，注意要处理好this的指向（要么用箭头函数，要么提前保存this）：

getUser: function(id) {
  // 用箭头函数，这样this会指向Vue实例
  axios
    .get('/api/users/view.json?id=' + id)
    .then((response) => {
      this.$refs.emailInput.value = response.data.user.email;
    })
    .catch(function(error) {
      console.log(error);
    });
}

或者如果习惯用普通函数，可以提前把this存起来：

getUser: function(id) {
  const vm = this;
  axios
    .get('/api/users/view.json?id=' + id)
    .then(function(response) {
      vm.$refs.emailInput.value = response.data.user.email;
    })
    .catch(function(error) {
      console.log(error);
    });
}

为什么这两种方法可行？因为你没办法用v-model（后端PHP验证失败会重置值），而直接修改输入框的value属性是绕过Vue双向绑定的方式，能直接给表单元素设置初始值，同时不影响后续PHP对表单提交值的处理。

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