New to vue, looking to update html form email value from ? to api result one time only...

I can't use v-model as the submitted form validated with php so invalid submission will reset the submitted value to null etc..

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

getUser: function(id) {
            axios
                .get('/api/users/view.json?id='   id)
                .then(function(response) {

                ???? update form email value with response.data.user.email;

                })
                .catch(function(error) {
                    console.log(error);
                });
        },

CodePudding user response：

Im not sure exactly what you want.

See this to get started:

<script setup>
import { ref, onBeforeMount } from 'vue'
const email = ref('')
const getUser = async () => {
  email.value = await fetch('https://random-data-api.com/api/users/random_user').then(res => res.json()).then(json => json.email)
}
</script>

<template>
  <button @click="getUser">
    Click to get email
  </button>
  <form method="post" action="/user/change/12345">
    <input type="text" name="email" :value="email" id="email" />
    <button type="submit">Submit</button>        
  </form>
</template>

Playground example

CodePudding user response：

You can manipulate the value of an input via ref.

First, set the ref attribute in your template.

<input type="text" name="email" value="?" id="email" ref="emailField"/>

Then, you can access this element via this.$refs in your script section.

getUser () {
  // above code...
  this.$refs.emailField.value = response.data.user.email
}