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

我使用html创建了一个输入表单，并给出了

v-model=“upCountryName”

，默认情况下这是一个空数组，但如果单击名称值，我就编写了使用djangorestframework从django db获取数据的函数，并且我也从

v-model=“upCountryName”

中获得了数据[对象]

所以我写了

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>

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

----------
Vue.js
导出默认值{
数据（）{
返回{
upCountryName:[]
};
},
方法：{
国家/地区表格（id）{
this.up\u country\u box=true；
这是。$http.get（'http://127.0.0.1:8000/getCountry/“+id）
。然后（（响应）=>{
this.upCountryName=response.data；
这一点：加载=错误；
});
console.log（id）；
this.add_country_box=false；
}
}
};

您必须确保

响应。数据的格式类似于
{country:“Some country Name”}
然后一切都会正常工作

你可以看到演示

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

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

仍然不起作用，因为我从django rest api获得的响应数据，即使在您建议它不起作用之后，它显示了相同的对象。响应数据是什么？您能分享一些例子吗？[{“国家”：“印度”}]这是响应数据。它应该是对象而不是数组。如果您有某些原因使用数组，可以使用
this.upCountryName=response.data[index]
或在模板中使用
v-model='upCountryName[index].country'
亲爱的用户28谢谢，但hwat我有点怀疑，我获取数据的方式与我之前向evry提到的相同，在页面中它工作得很好，但在输入表单中没有，是否有将json数据与输入表单绑定的特殊情况。。。。？