If the data is to be removed, I find the element with findIndex and discard it as a null value in isInArray. If there is no such data, how do I add it to the empty element starting from the first element? For example, if the element in the first data is full, it should know that the second element is empty and add it to it.
<template>
<input type="text" v-model="name">
<input type="text" v-model="surname">
<button @click="addCustomer"></button>
</template>
<script>
import Vue from "vue";
export default {
data(){
return{
name:null,
surname:null,
customers:[{},{},{}],
currentIndex:null
}
},
methods:{
addCustomer(){
let findIndex = this.customers.findIndex((customer) => customer.name === this.name );
let isInArray = findIndex !== -1;
if(isInArray){
Vue.set(this,"currentIndex",findIndex)
Vue.set(this.customers[this.currentIndex], 'name', null)
}else{
// What Should I write here?
}
}
}
}
</script>
CodePudding user response：
Understanding from your question, If you want to add customer to list if not in customers by name and if exist then update the existing customer from the list.
Then your code should be like this.
<template>
<input type="text" v-model="name">
<input type="text" v-model="surname">
<button @click="addOrUpdateCustomer"></button>
</template>
<script>
import Vue from "vue";
export default {
data(){
return{
name:"",
surname:"",
customers:[]
}
},
methods:{
addOrUpdateCustomer() {
const customerAtIndex = this.customers.findIndex(c => c.name === this.name);
//existing customer
if(customerAtIndex > -1) {
// You can update anything here
let existingCustomer = this.customers[customerAtIndex];
existingCustomer.surname = this.surname;
this.customers[customerAtIndex] = existingCustomer;
}
else {
//new customer
this.customers.push({name: this.name, surname: this.surname});
}
}
}
}
</script>
CodePudding user response：
I think there's a misconception here. customers is an array of empty objects, it could (or not) contain the information of your customers. But you don't necessarily need to create the empty object as placeholders. Array in JS have different methods you can use to achieve what you want. Like push method to add an element at the end of the array or slice to remove it.
In your example, it could be something like:
addCustomer(){
let findIndex = this.customers.findIndex((customer) => customer.name === this.name );
let isInArray = findIndex !== -1;
if (!isInArray){
this.customers.push("name", "Nacho")
}
}
If the customer is not in the array, it is supposed that you want to add it. If IT IS IN THE ARRAY... then it depends on your logic. But you can remove it using slice array method.
BTW, there's no need to use the Vue.set method, as the push method is the same for this case (Vue takes care of the new inserted value, so it is reactive).
CodePudding user response：
As an user above states, I too believe you have a misconception going on.
An array is just a list of customers, the object just contains the attribute of a customer, if there's no customer in the list at the first place, there's no need to add an object.
A cart needs 5 fruits, if the cart is empty, I don't need to add empty strings on the cart.
If an array needs 5 numbers, but if the array is empty, there's no need to add 0s as a placeholder in the array
You are trying to do something like this
const cart = ["", "", "", "", ""]
const array = [0, 0, 0, 0, 0]
there's no reason to do this at all.
If you want to limit the size of the array, you can stop the function if the length of the array is at the limit.
For example
// stop the function if the array size is at 3
// means the size limit is 3
if (array.length === 3) return
const addCustomer = () => {
if (array.length === 3) return
array.push(value) // replace value with customer or whatever you want to add
}