如何从json设置值表单输入vue js

Question

请在这里遇到问题。 我想显示输入表单中的值：名称和位置。 但是数据是json的形式。

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

这是模板 html vue js

<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" onclick="return false">
              <div class="form-group">
                <label for="">Name</label>
                <input v-model="input.nameInput" type="text" value="?" autocomplete="off" class="form-control">
              </div>
              <div class="form-group">
                <label for="">Position</label>
                <input v-model="input.posInput" value="?" type="text" autocomplete="off" class="form-control">
              </div>
              <button type="submit" class="btn btn-primary">Edit</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

这是模板文件vue js的java脚本

<script>
export default {
  data(){
    return{
        name:'',
        pos:'',
        input:{
          nameInput:'',
          posInput:''
        }
    }
  },
  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.position,
      }).then(response => {
        this.$route.employe;
      });
    }
  },
  mounted(){
    this.getEmploye();
  }
}
</script>

谢谢你的帮助。

Answer 1

如您的问题所述，如果收到的数据是

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

那么你的getEmploye方法应该是：

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

Answer 2

关于元素的值，您可以使用以下内容来显示您从 api 收到的数据：

value=“{{name}}”

这意味着您正在从名称数据中获取值。

此外，为了测试这是否有效，您可以先为 name 分配一个虚拟数据/值。

Answer 3

您不需要为输入创建两个单独的变量，另一个用于显示，只需为两者保​​留相同的变量，它会在用户键入时在显示和输入中自动更新，这就是美的 Vue。

所以代替

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

就收下吧

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

对于模板输入使用：

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

整体结果应如下所示：

<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：没有测试代码，如果有任何错误，请告诉我

Answer 4

使用:value=“name” ，例如<input :value="name"/> 。