我有一个数组，它从用户回答多个问题中获取输入。这些值存储在我的 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)虽然单个数组是通过用户输入创建的，但我要求用户能够将值拖到第二列甚至第三列中以便对它们进行分组。
如何才能使我在屏幕上的更改反射(reflect)在商店中 - 甚至在新数组中 - 以便我的列表可以分成多列？
这是我的代码沙箱:https://codesandbox.io/embed/vue-template-j53g3
编辑:Sabee 回复后
我已经实现了以下代码:
watch:{
allValues: {
handler: function(newValue) {
console.log('here', newValue)
this.$store.dispatch("corevalues/loadCoreValues", newValue);
}
},
deep: true // deep watching changes
},
但如下图所示 - 数组 {{ allValues }} 仍然保持相同的顺序，即使它已在屏幕上重新排列。
第二次编辑
按照建议更新了代码。
控制台正在记录“拖动结束”，但如下图所示，商店中的核心值尚未更新 - 这是通过开发工具“重新加载状态”之后的结果。
最佳答案
你可以使用
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>
关于javascript - 如何使用 Vue-draggable 和 Vuex 将一个列表动态拆分为多个列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56504564/