使用 VueJS 和 axios 获取 API：生命周期问题

Question

我正在做一个项目，我需要在一个 Vue 项目中使用 API。 我正在尝试从 API 获取一些数据，但它什么也没给我。 （根据控制台没有问题也没有警告消息）。 标题和内容什么都不打印，当我这样做时，我的控制台日志只有第三个不是空的。

这是我的代码：

<template>
  <div ref="myDraggable" class="draggable" id="cardpokemon">
    <div v-for="note in notes" v-bind:key="note.title">
      <h2>
        {{ note.title }}
      </h2>
    </div>
    <select onchange="this.parentNode.style.backgroundColor = this.value">
      <option value="">Pokemon Type</option>
      <option value="#F9F564">Electrique</option>
      <option value="#F58A51">Feu</option>
      <option value="#71E4FB">Eau</option>
      <option value="#FABEF0">Fée</option>
      <option value="#8EEC8D">Plante</option>
      <option value="#9789A9">Ténèbre</option>
      <option value="#B6B6B6">Roche</option>
    </select>
    <div class="subcard" v-bind:key="note.content" v-for="note in notes">
      <h3>
        {{ note.content }}
      </h3>
    </div>
    <input type="button" id="buttonfleche" value="->" />
  </div>
</template>


<script>
import interact from "interactjs";
import axios from "axios";


export default {
  name: "Draggable",
  data() {
    return { 
notes: [{}]
    
,
      
    }
  },
  mounted: function () {
    axios.get('http://5.135.119.239:3090/notes/')
    .then(function(response){
      console.log(this.notes);
      this.notes = response.data; 
      console.log(this.notes);
    }.bind(this));
    console.log(this.notes)
    let myDraggable = this.$refs.myDraggable;
    this.initInteract(myDraggable);
   
    

  },
  
  methods: {
   

   
   
// <-------------------   START DRAG FUNCTION -----------------------> // 
    initInteract: function (selector) {
      interact(selector).draggable({
        inertia: true,

        restrict: {
          restriction: "parent",
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 0, right: 0 },
        },
      
        autoScroll: true,

     
        onmove: this.dragMoveListener,
       
        onend: this.onDragEnd,
      });
    },
    dragMoveListener: function (event) {
      var target = event.target,
        x =
          (parseFloat(target.getAttribute("data-x")) || this.screenX) +
          event.dx,
        y =
          (parseFloat(target.getAttribute("data-y")) || this.screenY) +
          event.dy;

      target.style.webkitTransform = target.style.transform =
        "translate(" + x + "px, " + y + "px)";

      target.setAttribute("data-x", x);
      target.setAttribute("data-y", y);
    },
    onDragEnd: function (event) {
      var target = event.target;
      console.log(target);
      
      this.screenX = target.getBoundingClientRect().left;
      this.screenY = target.getBoundingClientRect().top;
    },
    // <---------- END DRAG FUNCTION -------------------------> // 



    // <------------ START SELECTOR COLOR CHANGE ---------------> // 

    onchange: function (param) {
      document.getElementById("tochange").style.background = param;
    },
  },

Answer 1

您的代码没有问题。都是关于异步代码的。

axios.get('http://5.135.119.239:3090/notes/')
.then(function(response){
  console.log(this.notes); // 2
  this.notes = response.data; 
  console.log(this.notes); // 3
}.bind(this));

console.log(this.notes) // 1
let myDraggable = this.$refs.myDraggable;
this.initInteract(myDraggable);

我已经对 console.log() 调用进行了编号，以便它们被打印出来。

第一个日志不打印任何内容，因为它在请求解决之前被调用。

第二个没有打印，因为 this.notes 还没有设置。

第三个在你设置后打印数据。

此外，您可能希望丢失 bind(this) 并将响应回调替换为箭头函数。