[Vuejs]-How to set value form input vue js from json

As described in your question, if the data received is

{"id":5,"name":"the name","pos":"the position"}

then you getEmploye method should be :

getEmploye(){
  axios.get('/employes_api/'+this.$route.params.id).then(response => {
    this.name = response.name;
    this.pos = response.pos;
  });

On element’s value, you may use the following to display data you have received from the api:

value=“{{name}}”

That means you are getting the value from name data.

Also, to test if that works, you may assign first a dummy data/value to name.

You don’t need to make two separate variables one for the inputs and the other for the display, just keep the same variable for both, it will be automatically updated on the display and in the inputs while the user is typing, that’s the beauty of Vue.

So instead of

data(){
    return{
        name:'',
        pos:'',
        input:{
          nameInput:'',
          posInput:''
        }
    }
  },

Just keep

data(){
    return{
        name:'',
        pos:''
    }
},

For the template inputs use :

<input v-model="name" type="text" autocomplete="off" class="form-control">
...
<input v-model="pos" type="text" autocomplete="off" class="form-control">

The overall result should look like this :

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">
            Edit <b>{{name}}</b>
          </div>
          <div class="card-body">
            <form @submit="edit()" method="post">
              <div class="form-group">
                <label for="">Name</label>
                <input v-model="name" type="text" autocomplete="off" class="form-control">
              </div>
              <div class="form-group">
                <label for="">Position</label>
                <input v-model="position" type="text" autocomplete="off" class="form-control">
              </div>
              <button type="submit" class="btn btn-primary">Edit</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
        name:'',
        pos:''
    }
  },
  methods:{
    getEmploye(){
      axios.get('/employes_api/'+this.$route.params.id).then(response => {
        this.name = response.data.name;
        this.pos = response.data.pos;
      });
    },
    edit(){
      axios.put('/employes_api/'+this.$route.params.id, {
        name: this.name,
        pos: this.pos,
      }).then(response => {
        this.$route.employe;
      });
    }
  },
  created(){
    this.getEmploye();
  }
}

Ps : Didn’t test the code, if there is any error just let me know

Use :value=“name”, e.g <input :value="name"/>.