The V-model fails to reflect changes when the checkbox list is updated

Question

The V-model fails to reflect changes when the checkbox list is updated

I am facing an issue with my checkboxes that are generated dynamically in a component using a v-for loop. Once a checkbox is checked, it is added to an array of selected checkboxes. The problem arises when a checked checkbox is removed - the v-model still includes the removed checkbox. How can I update the v-model to reflect changes in the array? I have already tried re-rendering the entire component, but that is not the ideal solution.

  <div v-for="player in players" :key="player.id">
  <input
    v-model="selectedPlayers"
    :value="player.id"
    type="checkbox"
    :id="player.id"
  />
  <label :for="player.id">
    {{ player.name }}
  </label>
</div>

Sandbox

Current Issue

https://i.sstatic.net/YDr0E.png

Desired Solution

https://i.sstatic.net/PM6jT.png

javascript vue.js

Answer 1

Answer №1

Make sure to manually remove data from the V-model when the component is no longer rendered.

To achieve this, filter the selectedPlayers from the @click handler to only include ids present in the new variable.

this.selectedPlayers = this.selectedPlayers.filter(
  id => players2.find(
    player => player.id === id
  )
)

Answer 2

Make sure to manually remove data from the V-model when the component is no longer rendered.

To achieve this, filter the selectedPlayers from the @click handler to only include ids present in the new variable.

this.selectedPlayers = this.selectedPlayers.filter(
  id => players2.find(
    player => player.id === id
  )
)

Answer 3

Answer №2

Based on my understanding, you have an array called player2 that needs to be compared with the selectedPlayers array. The goal is to ensure that whatever is in the players2 array is also present in the selectedPlayers array. This can be achieved by using the map array function to iterate over the players2 array and extract only the ids of the players. These ids can then be stored in the selected players array, which is a reactive property that will automatically update the DOM. There is no need to re-render the component.

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data() {
    return {
      selectedPlayers: [],
      players: [
        {name: "Arnold",id: "1"},
        {name: "Rambo",id: 2},
        {name: "Terminator",id: 3},
        {name: "Titan",id: 4},
        {name: "Odin",id: 5},
      ],
      players2: [
        {name: "Titan",id: 4},
        {name: "Odin",id: 5},
      ],
    };
  },
  methods: {
    clicked() {
      this.players = this.players2;
      this.selectedPlayers = this.players2.map(p => p.id);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  If you check all checkboxes and press the button, the array still contains all elements
  <div v-for="player in players" :key="player.id">
    <input v-model="selectedPlayers" :key="players.length" :value="player.id" type="checkbox" :id="player.id" />
    <label :for="player.id">
        {{ player.name }}
      </label>
  </div>
  {{ selectedPlayers }}
  <button @click="clicked">Press me</button>
</div>

Answer 4

Based on my understanding, you have an array called player2 that needs to be compared with the selectedPlayers array. The goal is to ensure that whatever is in the players2 array is also present in the selectedPlayers array. This can be achieved by using the map array function to iterate over the players2 array and extract only the ids of the players. These ids can then be stored in the selected players array, which is a reactive property that will automatically update the DOM. There is no need to re-render the component.

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data() {
    return {
      selectedPlayers: [],
      players: [
        {name: "Arnold",id: "1"},
        {name: "Rambo",id: 2},
        {name: "Terminator",id: 3},
        {name: "Titan",id: 4},
        {name: "Odin",id: 5},
      ],
      players2: [
        {name: "Titan",id: 4},
        {name: "Odin",id: 5},
      ],
    };
  },
  methods: {
    clicked() {
      this.players = this.players2;
      this.selectedPlayers = this.players2.map(p => p.id);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  If you check all checkboxes and press the button, the array still contains all elements
  <div v-for="player in players" :key="player.id">
    <input v-model="selectedPlayers" :key="players.length" :value="player.id" type="checkbox" :id="player.id" />
    <label :for="player.id">
        {{ player.name }}
      </label>
  </div>
  {{ selectedPlayers }}
  <button @click="clicked">Press me</button>
</div>

The V-model fails to reflect changes when the checkbox list is updated

Answer №1

Answer №2

Similar questions

Sending router data as a prop

Printing doesn't display CSS styling

Using conditional rendering to set an icon in a ChipField component in React Admin

Tips on updating the default checkbox dynamically based on the current checkbox using JavaScript

Is it possible for an ajax request to complete even if a page redirection occurs?

How can you access the query in Next.js API when req.query is initially set to undefined?

Make sure to only update the state in useEffect after retrieving the data from the localStorage

When updating a form, it is essential to display select box data from the database effortlessly. It is also important to ensure that the select box data's id is

How can Vue i18n be utilized as a JavaScript object instead of within the template?

The process of updating JSON data based on changes triggered by DOM events such as drag and drop

I have successfully implemented an onChange function with its corresponding set of parameters. However, I now desire to extend its functionality by incorporating

execute the command only if all ava tests succeed

Methods for displaying data on the client side using express, MongoDB, and jade

Creating responsive arrow heads using D3: A step-by-step guide

Error: The function gethostname has not been declared

Is there a method to achieve greater accuracy when dividing a large number?

Is there a way to utilize a single function on two separate div elements?

How to dynamically load a file based on the chosen option value in React

Regarding passing input into a JavaScript class method that is exported through the exports keyword

Clear the Material-UI textfield upon form submission