data() {
return {
arrayToBeSorted: [1, 2, 3, 4, 5, 6, 7, 8],
isManipulatingArray: false,
shuffleButtonText: "Shuffle!",
sortAlgorithms: [
{ id: 1, name: "Bubble sort", fn: bubbleSort },
{ id: 2, name: "Selection sort", fn: selectionSort },
{ id: 3, name: "Insertion sort", fn: insertionSort },
],
}
},
methods: {
sort: function (Algorithm) {
this.Algorithm.fn();
},
show: function() {
console.log("shuffle!");
},
bubbleSort: function() {
console.log("bubble!");
},
selectionSort: function() {
console.log("selection!");
},
insertionSort: function() {
console.log("insertion!");
},
}<div class="buttons-container">
<button class="button" v-for="Algorithm in sortAlgorithms" :key="Algorithm.id" v-on:click="Algorithm.fn">{{ Algorithm.name }}</button>
</div>Upon clicking the button, I expect the corresponding method to be triggered using the sort function. However, an error is occurring stating that the function is not defined.