Vue изменить значение и текст на аксиос после успеха или неудачи - PullRequest
Новая
       15

Vue изменить значение и текст на аксиос после успеха или неудачи

0 голосов
/ 20 апреля 2019

Я новичок в Vue, и я изучал, смотрел некоторые учебные пособия и руководства и пытался сделать форму автоматической загрузки для выбора файла, но это на самом деле полностью отличается от jquery, с jquery я обычно легко найти, когда Google, когда Googleдля Vue я не могу легко найти ответы и много руководств.

То, что у меня есть сейчас, я просто написал .vue-код, основанный на нескольких руководствах, которые я наблюдал.Я использую Vue на фреймворке Laravel.Я хочу, чтобы форма ввода автоматически отправляла и загружала файл при выборе.И мне удалось заставить это работать, вот код: 

<template>
<div class="vcontainer">
    <label class="btn btn-default btn-file float-left">
      <span v-if="file">Change</span>
      <span v-else>Choose file</span>
      <input type="file" id="file" ref="file" v-on:change="handleFile()">
    </label>

    <div v-if="file">
        <input type="hidden" :name="input_name" :value="file.id"/>
        <span>{{ file.name }}</span>  << This output name of file
        <span>{{ file.id }}</span>    << This WONT output file id
    </div>
    <div v-else>
        Nothing.
    </div>

</div>

</template>

<script>
    export default {
        props: ['input_name', 'post_url', 'bind_user'],
        data() {
            return {
                file: false
            }
        },
        methods: {
            handleFile() {
                this.file = this.$refs.file.files[0];

                this.submitFiles();
            },
            submitFiles() {
                let formData = new FormData();
                formData.append('file', this.file);
                formData.append('bind_user', this.bind_user);
                axios.post( this.post_url,
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function(response) {
                    this.file.id = response.data.id;
                    console.log(this.file); << This show's object array and there is id field there along with name and other data.
                }.bind(this)).catch(function(response) {
                });
            },
        }
    }
</script>

Что у меня есть проблема понимания, как я могу изменить текст и входное значение на основе событий или ответа.Когда файл отправлен и успешно загружен, я получаю ответ обратно: 

{success: true, id: 42}

Очень просто, но когда я получаю ответ, я хочу изменить это значение id на скрытом вводе, так что в итоге у меня есть это:

<input type="hidden" :name="input_name" :value="42"/>

И, возможно, изменить текст поля ввода с Choose file на Change file.

Если бы я сделал это с помощью jquery и ajax, я мог бы сделать это очень просто, на ajaxУспешно найти элемент с input_name id и изменить значение.

Но на Vue это выглядит так, будто я наткнулся на это.

РЕДАКТИРОВАТЬ:

Я немного продвинулся ия теперь запутался больше, потому что я получаю ответ, и я получаю file.id в console.log, но в шаблоне vue тот же id пуст, но из того же массива file.name показывает имя файла.

Ответы [ 2 ]

0 голосов
/ 20 апреля 2019

В конце решено, и мне просто нужно изменить одну строку кода: 

axios.post( this.post_url,
  formData,
   {
       headers: {
         'Content-Type': 'multipart/form-data'
       }
    }
 ).then(function(response) {
   this.file = response.data;
}

От this.file.id = response.data.id до this.file = response.data

И это будет работать: 

<div v-if="file.id > 0">
    <input type="hidden" :name="input_name" :id="input_name" :value="file.id" />
</div>
0 голосов
/ 20 апреля 2019

Вы можете привязать возврат API к data реквизитам, привязать входное значение к этим реквизитам данных и использовать v-if, чтобы определить, должны ли они отображаться. Пример ниже - пожалуйста, дайте мне знать, если это решит вашу проблему или я неправильно понимаю, что вы ищете.

Мне пришлось использовать «псевдо-пример», так что это не 1: 1 с вашим кодом, но этого должно быть достаточно, чтобы понять суть.

[ Зеркало CodePen ] 

new Vue({
  el: "#app",
  data: {
    id: "",
    title: "",
    error: ""
  },
  methods: {
    clearResults() {
      this.id = "";
      this.title = "";
      this.error = "";
    },
    simulateError() {
      this.clearResults();
      this.error = "Something went wrong!"
    },
    getData() {
      this.clearResults();
      var vm = this;
      axios
        .get("https://jsonplaceholder.typicode.com/todos/1")
        .then(function(response) {
          if (response.data.id && response.data.title) {
            vm.id = response.data.id;
            vm.title = response.data.title;
          }
        })
        .catch(function(error) {
          vm.error = error;
        });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

<div id="app">
  <div>
    <div>
      <button @click="getData" style="color:green;">Click to load data from api</button>
      <button @click="simulateError" style="color:red;">Click to simulate error</button>
    </div>
    <div style="margin-top:10px;">
      <input v-if="id != '' && title != ''" :name="title" :value="id" />
    </div>
    <div>
      <p v-if="error != ''" style="color:red;">{{ error }}</p>
    </div>
  </div>
</div>
...