Question

我已经使用html创建了一个输入表单，并给定了v-model="upCountryName"，默认情况下它是一个空数组，但是如果单击了name值，我已经编写了使用djangorestframework从django db提取数据的函数，并且得到了数据，但是在v-model="upCountryName"的输入中，我正在以[对象Object]的形式获取数据。

所以我写了v-model="upCountryName.country"，实际上我想更新它，但是输入的表格显示为空，如何获得国家名称而不是整个对象。

----------
HTML --

<td v-on:click="up_country_form(c.id)">
  <!--c.id is country.id i am getting from django db and passing it to the method up_country_form(id) in script-->
  <center>
    <p class="fas fa-pencil-alt"></p> 
    </center>
</td>
<input type="text" v-model='upCountryName.country' class="form-control">

----------
Vue.js

<script>
  export default {
    data () {
      return {
        upCountryName: []
      };
    },
    methods: {
      up_country_form (id) {
        this.up_country_box = true;
        this.$http.get('http://127.0.0.1:8000/getCountry/'+id)
          .then((response) => {
            this.upCountryName = response.data;
            this.loading = false;
          });
        console.log(id);
        this.add_country_box = false;
      }
    }
  };
</script>

Answer 1

您必须确保response.data的格式类似于{ country: "Some Country Name" }，然后一切正常。

您可以观看演示here。

注意：如果使用upCountryName.country，则upCountryName的类型应该是“对象而不是数组”。

data () {
  return {
    upCountryName: {}
  }
}

如何在vue.js中的v模型上获取对象的属性而不是整个对象

1 个答案: