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}}”

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

此外，要测试该方法是否可行，您可以首先为名称分配一个虚拟数据/值。

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"/>。

如何从JSON设置值形式输入Vue JS

4 个答案: