如何在 vue.draggable 中更新 data()

Question

我知道这可能是基本的东西...但是在使用 Vue.Draggable 2.23 时我无法更新我的数据。在下面的代码中，这 4 个列表是从 axios 调用中 return 编辑的，与现在由 data() return 完全一样，但是，当然，还有内容。不知何故，我不断收到 "Property or method "lane0" is not defined on the instance but referenced during render."在 App.vue:

<script>
import draggable from "vuedraggable";
import axios from "axios";
export default {
  name: "two-lists",
  display: "Two Lists",
  order: 1,
  components: {
    draggable
  },

  data() {
    return {
        "lane0": [],
        "lane1": [],
        "lane2": [],
        "lane3": []
  }
    },
  mounted () {
    axios
      .get('http://localhost:8000/pylims/get_sequencable_lanes/10/S4')
      .then(response => (this.data= response.data))
  },
  methods: {

    log: function(evt) {
      window.console.log(evt);
    }
  }
}
</script>

根据要求，HTML 部分（App.vue 中的模板）：

<template>
  <div class="row">
    <div class="col-3">
      <h3>Draggable 1</h3>
      <draggable class="list-group" :list="lane0" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in lane0"
          :key="element.sample_name"
        >
          {{ element.sample_name }} {{ index }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>
      <draggable class="list-group" :list="lane1" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in lane1"
          :key="element.sample_name"
        >
          {{ element.sample_name }} {{ index }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 3</h3>
      <draggable class="list-group" :list="lane2" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in lane2"
          :key="element.sample_name"
        >
          {{ element.sample_name }} {{ index }}
        </div>
      </draggable>
    </div>
<br><br>
{{ lane0 }}
    <br><br>
{{ lane1 }}
    <br><br>
{{ lane2 }}
    <br><br>
{{ lane3 }}

  </div>
</template>

Answer 1

正如 Tobias G. 在评论中所述并在此处进行了明确解释：https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html 通过将通道包装在一个对象中，然后从 mounted() 函数中更新它来解决问题，就像这样:

 data() {
    return {
        lanes: {
          "lane0": [],
          "lane1": [],
          "lane2": [],
          "lane3": []
        }
  }
    },
  mounted () {
    axios
      .get('http://localhost:8000/pylims/get_sequencable_lanes/10/S4')
      .then(response => (this.lanes = response.data))
  },

然后像这样在 HTML 部分使用它：

<draggable class="list-group" :list="lanes.lane0" group="people" @change="log">

如何在 vue.draggable 中更新 data()

How to update data() in vue.draggable

vue.js

vue.draggable