How to sort a list by item valie in VueJs? - vue.js

Question

Is it possible in VueJs to display my blocks sorted by "block.position" value, and update all block position when I click on a "UP" or "DOWN" button?
I want to have my blocks in correct order in my "blocks" array, reflect the index position on the "block.position" value, and display all my blocks in a correct order.
<template>
<div>
<div class="mb-5" v-for="(block, index) in blocks" :key="block.id">
<div class="btn btn-primary" #click="move(index,index-1)" v-if="index">
<span class="fa fa-arrow-up"></span>
</div>
<div class="btn btn-primary"
#click="move(index,index+1)" v-if="index !== (blocks.length - 1)">
<span class="fa fa-arrow-down"></span>
</div>
<h3 class="text-uppercase text-info"><u>{{ block.name }}</u> - {{ block.position }}</h3>
<div v-for="field in block.fields" :key="field.id">
<p>{{ field.name }}</p>
<div class="mb-3">
<div v-if="field.type === 'textarea'">
<textarea
:required="field.required"
:placeholder="field.attr ? field.attr.placeholder : null"
:value="field.data"
/>
</div>
<div v-else>
<input
:type="field.type"
:required="field.required"
:placeholder="field.attr ? field.attr.placeholder : null"
:value="field.data"
/>
</div>
<div class="alert alert-danger" v-for="error in field.errors">
{{ error }}
</div>
</div>
</div>
<hr class="border-light">
</div>
<ul class="list-unstyled d-block">
<li class="d-inline-block">
<button class="btn btn-light" v-on:click="addParagraph">
Add Paragraph
</button>
</li>
<li class="d-inline-block ml-3">
<button class="btn btn-light" v-on:click="addImage">
Add Image
</button>
</li>
</ul>
</div>
</template>
<script>
// Going to use this neat array function
Array.prototype.move = function (from, to) {
this.splice(to, 0, this.splice(from, 1)[0]);
return this;
};
export default {
name: 'BlockForm',
created() {
// Tri dans le tableau les blocks par "block.position".
this.updateBlockPosition();
},
data() {
return {
blocks: [
{
id: 0,
type: 'paragraph',
name: 'Paragraphe',
position: '1',
fields: [
{
id: 0,
type: 'textarea',
name: 'Saisissez votre texte ci-dessous',
required: true,
data: null,
errors: [
'Lorem ipsum sir dolor emet',
],
},
],
},
{
id: 1,
type: 'image',
name: 'Image',
position: '2',
fields: [
{
id: 0,
type: 'file',
name: 'Sélectionner une image',
required: false,
placeholder: null,
data: null,
errors: [],
},
{
id: 1,
type: 'text',
name: 'Description de l\'image',
required: false,
placeholder: null,
data: null,
errors: [],
},
],
},
{
id: 2,
type: 'image',
name: 'Image',
position: '3',
fields: [
{
id: 0,
type: 'file',
name: 'Sélectionner une image',
required: false,
placeholder: null,
data: null,
errors: [],
},
{
id: 1,
type: 'text',
name: 'Description de l\'image',
required: false,
placeholder: null,
data: null,
errors: [],
},
],
},
],
};
},
methods: {
addParagraph() {
this.blocks.push({ ...this.blocks[0] });
this.updateBlockPosition();
},
addImage() {
this.blocks.push(this.blocks[1]);
this.updateBlockPosition();
},
move(from, to) {
this.blocks.move(from, to);
this.updateBlockPosition();
},
updateBlockPosition() {
this.blocks.forEach((block, index) => {
block.id = index + 1;
block.position = index + 1;
});
},
},
};
</script>