时间戳

首页 > 解决方案 > V-model 未绑定到 DOM 元素中

javascript - V-model 未绑定到 DOM 元素中

问题描述

这是我编写的代码，问题是 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>

标签： javascriptvue.jsaxiosvuetify.js

解决方案

除非您以这种方式声明，否则 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]
 }

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

希望有帮助。

推荐阅读