Question

这是我编写的代码，问题是v模型未绑定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>

Answer 1

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

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

希望有帮助。

V模型未绑定在DOM元素中

1 个答案: