Javascript 未在DOM元素中绑定V-model

下面是我编写的代码，问题是v-model没有绑定dom中的数据，我使用的axios正在返回值，但在dom中没有绑定：

<template>
  <v-container fluid>
    <v-layout>
      <v-flex md4 sm6 offset-sm3>
        <v-card class="card" color="brown">
          <v-card-title class="headline grey--text">Your Card Details</v-card-title>
          <v-flex ma-2>
            <v-form class="form" ref="form" mt-2>
              <v-text-field v-model="info.name"></v-text-field>
              <v-text-field v-model="info.userName"></v-text-field>
              <v-text-field v-model="info.card"></v-text-field>
              <v-text-field v-model="info.expireDate"></v-text-field>
              <v-text-field v-model="info.cvv"></v-text-field>
              <v-btn @click="submit" flat color="success">Submit</v-btn>
              <v-btn @click="reset" flat color="error">Reset</v-btn>
            </v-form>
          </v-flex>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      info: [],
      valid: true
    }
  },
  created() {
    axios
      .get("https://localhost:44311/api/payment-access")
      .then(res => this.info = res.data);
  },
  methods: {
    reset() {
      this.$refs.form.reset();
    },
    submit() {
      axios.get("https://localhost:44311/api/payment-access").then(res => {
        this.info = res.data;
        console.log(this.info);
        console.log("Yippy");
      });
    }
  }
};
</script>
<style scoped>
.card {
  border-radius: 20px;
}
</style>

您的信用卡详细信息
提交
重置
从“axios”导入axios；
导出默认值{
数据（）{
返回{
信息：[]，
有效：正确
}
},
创建（）{
axios
.get（“https://localhost:44311/api/payment-访问“）
。然后（res=>this.info=res.data）；
},
方法：{
重置（）{
这是.$refs.form.reset（）；
},
提交（）{
axios.get（“https://localhost:44311/api/payment-然后（res=>{
this.info=res.data；
console.log（this.info）；
控制台日志（“Yippy”）；
});
}
}
};
.卡片{
边界半径：20px；
}

Vue不会进行深层绑定，除非您以这种方式声明。 @Ijubadr试图解释同样的情况

在脚本中的data（）中声明信息，如下所示。对象不是数组

info: {name: '', userName: '', card: '', expireDate: '', cvv: ''}

相应地分配来自axios的传入数据。暗示如下所示：

this.info = {
  name: data[0],
  userName: data[1],
  card: data[2],
  expireDate: data[3],
  cvv: data[4]
 }

*根据传入数据案例数组/对象填充上述信息对象。 应该行得通

---

希望对您有所帮助。

请以文本形式提供代码您将

信息：[

定义为数组，但稍后您将其用作对象。您应该从

信息开始定义它：{name:''，userName:''，card:''，…}

，其中需要指定将用作模型的所有字段。阅读更多关于@BoussadjraBrahim的信息我试图上传代码，但我无法很好地对齐它，我尝试将其粘贴到这里，并提供链接，我将通过格式化编辑您的问题it@BoussadjraBrahim我试图上传代码本身，但我无法正确对齐，因此请容忍我，如果可以，请提供解决方案，@Ljubaddr我声明它是一个数组，但当我将response.data分配给info属性时，一旦承诺返回，它将工作，但由于某些原因，我不知道它现在不工作。谢谢你给我信用，但你可以删除它并添加指向文档Ljubaddr@Rahul Roy的链接谢谢，我已经像在问题中那样完成了绑定，它进行得很顺利，但是当我登录控制台（this.info）时，它抛出了一个错误，再次感谢