javascript - 如何使用 Vue-draggable 和 Vuex 将一个列表动态拆分为多个列表？

Question

我有一个数组，可以通过回答多个问题从用户那里获取输入。这些值存储在我的 vuex 存储中，结果以可拖动列表的形式显示在屏幕上。

computed: {
  allValues() {
        const val1 = this.responses1
        const val2 = this.responses2
        const val3 = this.responses3
        const val4 = this.responses4
        const val5 = this.responses5
        const val6 = this.responses6
        const val7 = this.responses7
        const coreValues = val1.concat(val2,val3,val4,val5,val6,val7)
        this.$store.dispatch('corevalues/loadCoreValues', coreValues)
        return this.$store.getters['corevalues/getCoreValues']
    }
  }

可拖动列表

 <draggable :v-model="allValues" 
    options:='group: "allValues"'>
     <transition-group>
      <div v-for="val in allValues" :key="val.value">
          {{val.value}}
      </div>
    </transition-group>
 </draggable>

{{ allValues }}

但是，虽然我可以在屏幕上拖动和排序值 - 它们不会在 Vuex 商店中重新排序，只能在屏幕上。

1) 我需要他们在商店重新订购。

2）虽然通过用户输入创建了一个数组，但我要求用户能够将值拖到第二列甚至第三列中以便对它们进行分组。

如何使我的屏幕更改反映在商店中 - 甚至在新数组中 - 以便我的列表可以分成多个列？

这是我的代码沙箱：https ://codesandbox.io/embed/vue-template-j53g3

编辑：萨比回应后

我已经实现了以下代码：

watch:{
    allValues: {
        handler: function(newValue) {
          console.log('here', newValue)
          this.$store.dispatch("corevalues/loadCoreValues", newValue);
        }
    },
    deep: true // deep watching changes
  },

但如下图所示 -{{ allValues }}即使在屏幕上重新排列了数组，它的顺序仍然相同。

第二次编辑

按照建议更新了代码。

控制台正在记录“拖动结束”，但如下面的屏幕截图所示，商店中的核心值尚未更新 - 这是在通过开发工具“重新加载状态”之后。

Answer 1

您可以使用

watch:{
 list: {
        handler: function(newValue) {
            // do your job 

           // this.$store.commit("updateList", value);
           // commit your changes to store 
  }

        },
        deep: true // deep watching changes
    }

}

为了检查更改和重新订购，创建一个按钮来保存用户更改以存储也是很好的解决方案。

更新 所以拖动更改没有 :( ...但是 vue-draggable 中有事件在@end 拖动结束时，您可以将排序数组存储在 vuex 存储中

 <draggable :v-model="allValues" @end="onEnd">
          <transition-group>
            <div v-for="val in allValues" :key="val.value">{{val.value}}</div>
          </transition-group>
        </draggable>

在方法中

  methods: {
    onEnd(){
      console.log("Drag ended")
        this.$store.dispatch("corevalues/loadCoreValues", this.allValues);
    },

最后

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      num: 1,
      allValues:[],
      responses1: [],
      responses2: [],
      responses3: [],
      responses4: [],
      responses5: [],
      responses6: [],
      responses7: [],
      question: [
        {
          id: 1,
          question: "What do you believe defines the culture at your company?"
        },
        {
          id: 2,
          question:
            "What values do you bring to your work that you consistently uphold whether or not they are rewarded?"
        },
        {
          id: 3,
          question:
            "What do you truly stand for in your work? What do you believe your company truly stands for?"
        },
        {
          id: 4,
          question:
            "What do your customers believe about you? What do they believe you stand for?"
        },
        {
          id: 5,
          question:
            "What values does your company consistently adhere to in the face of obstacles?"
        },
        {
          id: 6,
          question: "What are your company’s greatest strengths?"
        },
        {
          id: 7,
          question:
            "What are the top three to five most important behaviours you should expect from every employee (including you)?"
        }
      ]
    };
  },
  computed: {
    number(number) {
      return this.number + number;
    },
    // allValues: {
    //   // get() {
    //   //   const val1 = this.responses1;
    //   //   const val2 = this.responses2;
    //   //   const val3 = this.responses3;
    //   //   const val4 = this.responses4;
    //   //   const val5 = this.responses5;
    //   //   const val6 = this.responses6;
    //   //   const val7 = this.responses7;
    //   //   const coreValues = val1.concat(val2, val3, val4, val5, val6, val7);
    //   //   // this.$store.dispatch("corevalues/loadCoreValues", coreValues);
    //   //   // return this.$store.getters["corevalues/getCoreValues"];
    //   //   return coreValues;
    //   // },
    // }
  },
  watch: {
    responses1: {
      handler: function(newValue) {
        console.log(newValue)
        this.appendWithoutDublicates(this.responses1)
      },
      deep: true // deep watching changes if you need
    },
    // responses from 2 to 7: { 
    //   handler: function(newValue) {
    //     console.log(newValue)
    //     this.appendWithoutDublicates(this.responses1)
    //   },
    //   deep: true // deep watching changes if you need
    // },
    allValues: {
      handler: function(newValue) {
        console.log(newValue)
       this.$store.dispatch("corevalues/loadCoreValues", newValue);
      },
      deep: true // deep watching changes if you need
    },

  },
  methods: {
    appendWithoutDublicates(values){
      this.allValues = this.allValues.concat(values.filter(item => {
            return this.allValues.findIndex(obj => obj.value === item.value) < 0;
         }));
    },
    onEnd() {
      console.log("Drag ended");
      console.log(this.allValues);
      this.$store.dispatch("corevalues/loadCoreValues", this.allValues);
    },
    setValues() {
      // this.allValues = coreValues
    },
    questionNumber(num) {
      this.num += num;
    },
    addresponse1: function() {
      var elem = document.createElement("tr");
      this.responses1.push({
        value: ""
      });
    },
    removeElement1: function(index) {
      this.responses1.splice(index, 1);
    },
    addresponse2: function() {
      var elem = document.createElement("tr");
      this.responses2.push({
        value: ""
      });
    },
    removeElement2: function(index) {
      this.responses2.splice(index, 1);
    },
    addresponse3: function() {
      var elem = document.createElement("tr");
      this.responses3.push({
        value: ""
      });
    },
    removeElement3: function(index) {
      this.responses3.splice(index, 1);
    },
    addresponse4: function() {
      var elem = document.createElement("tr");
      this.responses4.push({
        value: ""
      });
    },
    removeElement4: function(index) {
      this.responses4.splice(index, 1);
    },
    addresponse5: function() {
      var elem = document.createElement("tr");
      this.responses5.push({
        value: ""
      });
    },
    removeElement5: function(index) {
      this.responses5.splice(index, 1);
    },
    addresponse6: function() {
      var elem = document.createElement("tr");
      this.responses6.push({
        value: ""
      });
    },
    removeElement6: function(index) {
      this.responses6.splice(index, 1);
    },
    addresponse7: function() {
      var elem = document.createElement("tr");
      this.responses7.push({
        value: ""
      });
    },
    removeElement7: function(index) {
      this.responses7.splice(index, 1);
    }
  }
};
</script>

并更新可拖动

<draggable :list="allValues" @end="onEnd">
  <transition-group>
    <div v-for="val in allValues" :key="val.value">{{val.value}}</div>
  </transition-group>
</draggable>