Как я могу опубликовать данные массива с Vue ax ios из данных, полученных из API - PullRequest
Новая
       10

Как я могу опубликовать данные массива с Vue ax ios из данных, полученных из API

0 голосов
/ 08 апреля 2020

Я столкнулся с проблемой, когда у меня есть форма с входными данными, генерируемыми динамически на основе результатов, возвращаемых API. Я могу получить данные успешно с помощью Ax ios, но проблема в том, что когда я хочу опубликовать введенный массив данных пользователем обратно в API, я не могу.

Шаблон такой, как показано здесь: 

<form @submit.prevent="getReference" class="form-material form-horizontal">
  <div class="row">
    <div class="col-md-6"
      v-for="(item, index) in items"
      :key="item.id">
      <div class="card bg-light-inverse ribbon-wrapper">
        <div class="card-block">
          <div class="ribbon ribbon-danger">{{index + 1}}</div>
          <div class="row ribbon-content">

            <input v-model="item.id" />
            <label class="col-md-12 text-themecolor">Enter Amount To Pay</label>
            <div class="card col-md-12 m-t-10">
              <input
                v-model.number="item.amount"
                type="number"
                class="form-control"
                placeholder
                max
                min
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <button
    class="btn btn-rounded btn-outline-danger waves-effect waves-dark"
  >Get Refrence</button>
</form>

И код JS: 

export default {
  data() {
    return {
      items: {},
      item: []
    };
  },
  created() {
    let uri = `/Api/${this.$route.params.id}/items`;
    this.axios.get(uri).then(response => {
      this.items = response.data;
    });
  },
  // could go with computed method to check if there is data but well :
  methods: {
    getReference() {
      console.log(this.item);
      let uri = "/api/reference";
      this.axios.post(uri, this.item).then(response => {
        this.$router.push({ name: "fee" });
      });
    },
  }
};

Когда я пытаюсь опубликовать форму, ничего не отправляется, и в консоли выдается ошибка uncaught exception: Object , Я не могу понять, что здесь не так.

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 08 апреля 2020

Вы зацикливаете items как item в разделе шаблона и используете item для привязки входов. При отправке вы используете this.item in axios.

Входные данные привязываются к самому items, так как вы его зацикливаете. Вы можете попробовать отправить items вместо item в разделе ios. 

  methods: {
    getReference() {
      console.log(this.item);
      let uri = "/api/reference";
      this.axios.post(uri, this.items).then(response => {
        this.$router.push({ name: "fee" });
      });
    },
  }

Вы можете удалить item в разделе данных, так как это вызовет проблемы при использовании того же элемента для значения привязки в разделе ввода.

...