@@ -31,7 +31,7 @@ import Ripple from '../ripple/Ripple';
export default {
props: {
- value: {
+ modelValue: {
type: Array,
default: null
},
@@ -74,7 +74,7 @@ export default {
},
moveUp() {
if (this.d_selection) {
- let value = [...this.value];
+ let value = [...this.modelValue];
for (let i = 0; i < this.d_selection.length; i++) {
let selectedItem = this.d_selection[i];
@@ -92,7 +92,7 @@ export default {
}
this.reorderDirection = 'up';
- this.$emit('input', value);
+ this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
@@ -102,7 +102,7 @@ export default {
},
moveTop() {
if(this.d_selection) {
- let value = [...this.value];
+ let value = [...this.modelValue];
for (let i = 0; i < this.d_selection.length; i++) {
let selectedItem = this.d_selection[i];
@@ -118,7 +118,7 @@ export default {
}
this.reorderDirection = 'top';
- this.$emit('input', value);
+ this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
@@ -128,7 +128,7 @@ export default {
},
moveDown() {
if(this.d_selection) {
- let value = [...this.value];
+ let value = [...this.modelValue];
for (let i = this.d_selection.length - 1; i >= 0; i--) {
let selectedItem = this.d_selection[i];
@@ -146,7 +146,7 @@ export default {
}
this.reorderDirection = 'down';
- this.$emit('input', value);
+ this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
@@ -156,7 +156,7 @@ export default {
},
moveBottom() {
if (this.d_selection) {
- let value = [...this.value];
+ let value = [...this.modelValue];
for (let i = this.d_selection.length - 1; i >= 0; i--) {
let selectedItem = this.d_selection[i];
@@ -172,7 +172,7 @@ export default {
}
this.reorderDirection = 'bottom';
- this.$emit('input', value);
+ this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
@@ -194,7 +194,7 @@ export default {
}
else {
this.d_selection = (metaKey) ? this.d_selection ? [...this.d_selection] : [] : [];
- ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);
+ ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
}
}
else {
@@ -203,7 +203,7 @@ export default {
}
else {
this.d_selection = this.d_selection ? [...this.d_selection] : [];
- ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);
+ ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
}
}
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 7a1b86f7f..e6c14e5d6 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -32,15 +32,15 @@ import OrderList from 'primevue/orderlist';
Selection
- In case you'd need to access the selected items in the list, define a binding to the selection property with the sync operator so that
+
In case you'd need to access the selected items in the list, define a binding to the selection property with the v-model directive so that
it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well. Note that
this is optional and only necessary when you need to access the selection.
- Use the sync operator to enable two-way binding.
+ Use the v-model directive to enable two-way binding.
-<OrderList v-model="cars" dataKey="vin" :selection.sync="selection">
+<OrderList v-model="cars" dataKey="vin" v-model:selection="selection">
<template #header>
List of Cars
</template>
@@ -74,7 +74,7 @@ import OrderList from 'primevue/orderlist';
- value |
+ modelValue |
array |
null |
Value of the component. |