javascript - V-model 未绑定(bind)在 DOM 元素中

Question

这是我编写的代码，问题是 v-model 没有绑定(bind) dom 中的数据，我使用的 axios 正在返回值，但它没有绑定(bind)在 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>

Answer 1

除非您这样声明，否则 Vue 不会进行深层绑定(bind)。 @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]
 }

*根据传入的数据案例数组/对象填充上述信息对象。 应该可以工作

希望有帮助。