What I want is products according to the click order, adding the product field to the objects of the customers, and removing the product from the added user when the clicked checkbox is removed.

The product field is not a place entered manually, it is a place selected by checkbox above.
My english is a bit bad. I hope you understood what I wanted to say.

The first click should be added to the first customer, the second click to the second customer, and the third click to the third customer. If the relevant checkbox is removed, it should find out which customer the product belongs to and remove that product from the customer.

<template>
  <div>
    <input
      v-for="(product, index) in products"
      type="checkbox"
      name="`element${index}`"
      :value="product"
      @click="onSelected(i)"
    />
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th scope="col">
            <span>Name</span>
          </th>
          <th scope="col">
            <span>Surname</span>
          </th>
          <th scope="col">
            <span>Birthday</span>
          </th>
        </tr>
      </thead>
    </table>
    <tbody>
      <tr v-for="customer in customers" :key="customer.id">
        <td>
          <input v-model="customer.name" type="text" placeholder="name" />
        </td>
        <td>
          <input v-model="customer.surname" type="text" placeholder="name" />
        </td>
        <td>
          <input v-model="customer.birthday" type="date" placeholder="name" />
        </td>
      </tr>
    </tbody>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customers: [
        {
          name: null,
          surname: null,
          birthday: null,
        },
        { name: null, surname: null, birthday: null },
        { name: null, surname: null, birthday: null },
      ],
      products: [
        { i: 1, name: 'home' },
        { i: 2, name: 'car' },
        { i: 3, name: 'yatch' },
        { i: 4, name: 'villa' },
      ],
      selectedProduct: null,
    }
  },
  methods: {
    getCheck(i) {
      for (let i = 0; i < this.products.length;   i) {
        if (this.products[i].id === i) {
          return this.products[i]
        }
      }
      return null
    },
    onSelected(i) {
      if (this.selectedProduct === this.getCheck(i)) {
        this.selectedProduct = null
      } else {
        this.selectedProduct = this.getCheck(i)
      }
    },
  },
}
</script>

CodePudding user response：

example :

toggleLang(i) {
  if (!this.data.includes(i)) {
    this.data.push(i)
  } else {
    this.data.splice(this.data.indexOf(i), 1)
  }
}

You can also use splice

CodePudding user response：

I'm not sure if this is what you want but this is how I understood your question.

<template>
  <div>
    <div v-for="(product, index) in products" :key="product.id">
      <input
        :id="`element${index}`"
        type="checkbox"
        :name="`element${index}`"
        @change="toggleSelect({ isChecked: $event.target.checked, product })"
      />
      <label :for="`element${index}`">{{ product.name }}</label>
    </div>

    <table>
      <thead>
        <tr>
          <th scope="col"><span>Next</span></th>
          <th scope="col"><span>Name</span></th>
          <th scope="col"><span>Surname</span></th>
          <th scope="col"><span>Birthday</span></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(customer, index) in customers" :key="customer.id">
          <td><span v-if="index === currentIndex">