Vue.js - Nie może pobrać danych w jednej funkcji

Question

Hej

Mam pewien problem z Vue.JS i nie mam pojęcia jak go rozwiązać a sam problem jest błachy.

Utworzyłem formularz w modalu dzięki któremu mogę modyfikować poszczególnie dane. Gdy klikam edit, otwiera się okienko z danymi danego obiektu. Tutaj wszystko działa.

Problem pojawia się w momencie, gdy wpisuje nowe dane i chcę je wyświetlić w konsoli. Nic się nie pojawia. Myślałem, że funkcja się nie wywołuje więc dodałem tekst ale ten się pojawia. Mam wrażenie, że "this" po prostu jest puste.

 

Metoda na otworzenie modalu oraz pobrania informacji z modyfikowanego obiektu:

updateModal(index){

  $( "#updateModal" ).toggle();
  this.new_update_advantage = this.advantages[index];

},

I to działa bez problemu.

Tutaj funkcja która wysyła nowe dane do konsoli:

updateAdvantages(){
  console.log("Advantage data");
  console.log(this.new_update_advantage);
  console.log(this.new_update_advantage.title);
},

I ona już nie działa. Po kliknięciu na przycisk, w konsoli pojawia się tylko Advantage data i nic innego. Gdy przenoszę dwa ostatnie konsol logi do UpdateModal, wtedy konsola wyświetla mi dane bez żadnego problemu.

i tutaj jeszcze moje data:

data(){

    return {

        advantage:{
            icon: '',
            title: '',
            text: '',
        },
        advantages: [],
        errors: [],
        new_update_advantage: [],
        uri: 'http://127.0.0.1:8000/api/advantages/'
    }

},

Z jakiegoś powodu funkcja updateAdvantages nie może odnaleźć obiektu

Czy ktoś może wie jak to rozwiązać ?

Comments

Wstaw więcej kodu, najlepiej cały komponent

---

Zrobione ! Okroiłem tylko trochę HTML z niepotrzebnej zawartości

Answer 1

var axios = require("axios");
export default {
  
  data(){
    
    return {              
      advantage:{
        icon: '',
        title: '',
        text: '',
      },
      advantages: [],
      errors: [],
      new_update_advantage: [],
      uri: 'http://127.0.0.1:8000/api/advantages/'
    }
    
  },
  
  methods: {
    
    
    
    createModal2(index){
      
      this.errors = [];
      $( "#modal2" ).toggle();
      this.new_update_advantage = this.advantages[index];
      console.log(this.new_update_advantage);
      console.log(this.new_update_advantage.icon);
      
    },
    
    updateTask(){
      console.log(this.new_update_advantage.title);
      console.log("TEST");
      console.log(this.new_update_advantage.text);
    },
    
    createModal(){
      $( "#modal" ).toggle();
    },
    
    createTask(){
      axios.post(this.uri, {title: this.advantage.title, text: this.advantage.text, icon: this.advantage.icon, order: this.advantage.order, display: this.advantage.display})
      .then(response=>{
        this.advantages.push(response.data.advantage);
        $( "#modal" ).toggle();
      })
      
      .catch(error=>{
        console.log(error);
      });
    },
    
    updateTask(){
      console.log("ASDASDAD");
    },
    
    deleteTask(index){
      
      let confirmBox = confirm("Supprimer l'avantage");
      
      if(confirmBox == true){
        
        
        axios.delete(this.uri + this.advantages[index].id)
        .then(response=>{
          this.$delete(this.advantages, index);
        }).catch(error=>{
          console.log("error")
        });
      }
      
    },
    
    loadTasks(){
      
      axios.get(this.uri).then(response=>{
        
        this.advantages = response.data.advantages;
        this.loading = true;
        
        
      });
      
    }
    
    
  },
  
  mounted() {
    this.loadTasks();
    console.log("component mounted");
  }
}

<div id="modal2" class="modal">
      <div class="modal-box">

        <h3>EDIT MODAL</h3>

      <div class="form-group">
        <label for="icon">Icon</label>
        <input v-model="new_update_advantage.icon" type="text" id="icon">
      </div>

      <div class="form-group">
        <label for="order">Icon</label>
        <input v-model="new_update_advantage.order" type="text" id="order">
      </div>

      <div class="form-group">
        <label for="order">Display</label>
        <input v-model="new_update_advantage.display" type="text" id="display">
      </div>

      <div class="form-group">
        <label for="title">Title</label>
        <input v-model="new_update_advantage.title" type="text" id="title">
      </div>

      <div class="form-group">
        <label for="text">text</label>
        <input v-model="new_update_advantage.text" type="text" id="text">
      </div>

      <button @click="updateTask">Updaate button</button>



      </div>
    </div>

 

Comments

Masz 2x metodę updateTask

---

Czuję się jak głupek... ; _ ; Siedziałem nad tym z jakieś 2 godziny. Mogłem z samego początku skupić się na całym kodzie a nie tylko funkcji.

Dzięki wielkie za pomoc

---

huehehe

---

Polecam używać eslinta - wychwytuje takie błędy od razu

---

O, nie słyszałem o takim czymś. Jeszcze raz wielkie dzięki ^^