V-модель не обязательна в элементе DOM - PullRequest
Новая
       15

V-модель не обязательна в элементе DOM

0 голосов
/ 22 января 2019

Вот код, который я написал, и проблема в том, что v-модель не привязывает данные в dom, аксиосы, которые я использую, возвращают значения, но не привязывают в 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>

1 Ответ

0 голосов
/ 22 января 2019

Vue не выполняет глубокое связывание, пока вы не объявите это таким образом.@Ijubadr пытался объяснить то же самое.

Объявите информацию в ваших данных () в скрипте следующим образом.Объект, не являющийся массивом 

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

, соответственно назначает входящие данные из axios.намек!что-то вроде ниже: 

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

* заполните вышеупомянутый информационный объект в соответствии с массивом / объектом входных данных.Это должно работать

Надеюсь, что поможет.

...