distinctive information bound to a v-model in Vue

Question

distinctive information bound to a v-model in Vue

Within my template, I have a select field:

li(v-for="user in users", :id="'user_' + user.id")
  .user-management(@click="toggleShowUser(user)", :id="'user' + user.id")
    select(v-model="selected" :options="options")

In my Vue component:

export default {
  data() {
    return {
      options: [
        {
         value: 'option1',
         label: 'Option 1',
         iconLeft: 'user'
        },
      ],
      selected: ['option1']
    },
    toggleShowUser(user) {
      this.$set(this.selected, 0, "5ad0ac33a8abbc3fe4ce2863")
    }
  }
}

The issue is that the this.selected value is being set in all user select fields within the template.

I am looking to set this value specifically in a user's select field with a specific id.

Appreciate any help on this!

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

You have the ability to easily pass the index to the toggle function by modifying your code:

li(v-for="person in people", :id="'person_' + person.id")
  .person-management(@click="toggleShowPerson(person))", :id="'person' + person.id")
    select(v-model="selected.includes(person.id)" :options="choices")

Don't forget to update the function code accordingly:

export default {
  data() {
    return {
      choices: [],
      selected: []
    },
    toggleShowPerson(person) {
      if (this.selected.includes(person.id)) {
        // Remove
        this.selected = this.selected.filter(id => id !== person.id);
      } else {
        // Insert
        this.selected.push(person.id);
      }
    }
  }
}

Answer 2

You have the ability to easily pass the index to the toggle function by modifying your code:

li(v-for="person in people", :id="'person_' + person.id")
  .person-management(@click="toggleShowPerson(person))", :id="'person' + person.id")
    select(v-model="selected.includes(person.id)" :options="choices")

Don't forget to update the function code accordingly:

export default {
  data() {
    return {
      choices: [],
      selected: []
    },
    toggleShowPerson(person) {
      if (this.selected.includes(person.id)) {
        // Remove
        this.selected = this.selected.filter(id => id !== person.id);
      } else {
        // Insert
        this.selected.push(person.id);
      }
    }
  }
}

Answer 3

Answer №2

If you're looking to locate the chosen value for each instance, I recommend establishing a new attribute during every loop iteration. You have two potential approaches at your disposal -

li(v-for="user in users", :id="'user_' + user.id")
  .user-management(@click="toggleShowUser(user)", :id="'user' + user.id")
    select(v-model="selected[user.id]" :options="options")

    export default {
      data() {
        return {
          options: [],
          selected: []
        },
        toggleShowUser(user) {
          this.$set(this.selected[user.id], "5ad0ac33a8abbc3fe4ce2863")
        }
      }
    }

Alternatively,

li(v-for="user in users", :id="'user_' + user.id")
  .user-management(@click="toggleShowUser(user)", :id="'user' + user.id")
    select(v-model="user.selected" :options="options")


export default {
  data() {
    return {
      options: [],
    },
    toggleShowUser(user) {
      this.$set(user.selected, "5ad0ac33a8abbc3fe4ce2863")
    }
  }
}

Answer 4

If you're looking to locate the chosen value for each instance, I recommend establishing a new attribute during every loop iteration. You have two potential approaches at your disposal -

li(v-for="user in users", :id="'user_' + user.id")
  .user-management(@click="toggleShowUser(user)", :id="'user' + user.id")
    select(v-model="selected[user.id]" :options="options")

    export default {
      data() {
        return {
          options: [],
          selected: []
        },
        toggleShowUser(user) {
          this.$set(this.selected[user.id], "5ad0ac33a8abbc3fe4ce2863")
        }
      }
    }

Alternatively,

li(v-for="user in users", :id="'user_' + user.id")
  .user-management(@click="toggleShowUser(user)", :id="'user' + user.id")
    select(v-model="user.selected" :options="options")


export default {
  data() {
    return {
      options: [],
    },
    toggleShowUser(user) {
      this.$set(user.selected, "5ad0ac33a8abbc3fe4ce2863")
    }
  }
}

distinctive information bound to a v-model in Vue

Answer №1

Answer №2

Similar questions

The menu remains open at all times

Issue: Unspecified error when trying to access object attribute in Vue (Nuxt)

The x-axis is represented by JSON keys, while the y-axis is represented by

Error Encountered When Running JavaScript Code

Monitor $localStorage for any modifications

How can mongoose be used to modify user information in a database?

The object fails to initialize using data retrieved from the JSONP API

Using axios with async/await to handle unresolved promises in Javascript

Retrieve the value of a JSON string

How to Use JQuery to Disable Controls or Background on an ASPX Page

Vue shallow mounting not effective, issues with stubs

Transition smoothly between HTML pages by using a script to fade in and out while changing images from an array

How to rotate a SVG transformation matrix around its center point

Tips for collapsing a child accordion when the parent accordion is collapsed?

Calculator built with HTML, CSS, and JavaScript

Exploring the integration of dynamic URLs in Nuxt.js using DRF

I have a string in base64 that contains = symbols. What is the best way to remove them from the

Tips for positioning and resizing images within a changing DIV dimension

Tips for creating a cookie for an alternate website upon launching a new browser tab

Update the image path in Vue depending on the size of the screen