VueJS在v-for中只选择一个元素

Question

I'm using Vue v2

I'm trying to change only the properties of the selected element. See, when the response is marked after the click, it should change to a red color with a text that says 'Unmark'. And vice versa: if the button is clicked again (which now would say 'Unmark'), it should change to a green color and the text would be 'Mark'. Alas, it works.... Nevertheless, my code applies the change to every element inside the v-for; I only want that to happen to the selected element.

I've thought about using a Component to check if somethings changes, but first I'd like to see if there's a solutions for this. ANy help will be appreciated

Here's my code:

<div class="search-results">
                <div class="activity-box-w" v-for="user in users">
                    <div class="box">
                      <div class="avatar" :style="{ 'background-image': 'url(' + user.customer.profile_picture + ')' }">
                      </div>
                      <div class="info">
                        <div class="role">
                          @{{ '@' + user.username }}
                        </div>
                        <div>
                            <div>
                                <p class="title">@{{ user.customer.name }} 
                                @{{user.customer.lastname}}
                                </p>
                            </div>

                        </div>
                      </div>
                      <div class="time">
                        <input type="button" class="btn btn-sm btn-primary" v-on:click.prevent="markUser(user)" v-model="text" 
                        v-bind:class="[{'green-border':notMarked}, {'red-border':marked}]" v-cloak v-if="!action"
                        :disabled="action"></input>
                    </div>
                </div>
            </div>

Now for the script:

new Vue({
  el: '#engage-panel',
  data: {
    users: [],
    mark: {'id' : '', 'marks' : ''},
    text: 'Mark', //Migth change to Unmark later on
    action: false,
    marked: null,
    notMarked: null,
  }, 
    methods:
{   
markUser: function(user){

      this.mark.id = user.id;
      this.action= true;

      Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');
      this.$http.put('/mark/user', this.mark).then(response => {

                  if(response.body === "marked")
                  {
                      this.mark.marks="true";
                      this.text = 'Unmark';
                      this.marked= true;
                      this.notMarked= false;
                      this.action= false;

                  }else{
                      this.mark.marks="false";                  
                      this.text = 'Mark';
                      this.marked= false;
                      this.notMarked= true;
                      this.action= false;
                  }

                }).catch(e => {

                    this.action= false;
                });
    }

}

Answer 1

The issue my code applies the change to every element you met is caused by every user in v-for="user in users" uses one same object to indicates it is marked or not.

If your users data has one property like status to save current status (like unmark, mark etc), it is very simple, just change to next status when click mark button.

If your users data doesn't have that property, you need to create one dictionary, then save the users already clicked as key, the status for the user will be the value.

Below is one demo:

 app = new Vue({ el: "#app", data: { users1: [{'name':'abc', 'status':'none'}, {'name':'xyz', 'status':'none'}], users2: [{'name':'abc'}, {'name':'xyz'}], selectedUsers: {} }, methods: { getNextStatusBaseOnRoute: function (status) { if(status ==='marked') return 'marked' let routes = {'none':'unmark', 'unmark':'marked'} return routes[status] }, markUser1: function (item) { item.status = this.getNextStatusBaseOnRoute(item.status) }, markUser2: function (item) { let status = item.name in this.selectedUsers ? this.selectedUsers[item.name] : 'none' // remember to use vue.$set when adding new property to one object this.$set(this.selectedUsers, item.name, this.getNextStatusBaseOnRoute(status)) } } })

 .marked { background-color:green; } .unmark { background-color:yellow; }

 <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> <div id="app"> <h2>Case 1: </h2> <div v-for="(item, index1) in users1" :key="'1'+index1"> <span>{{item.name}}:</span><span :class="[item.status]">{{item.status}}</span><button @click="markUser1(item)">Mark</button> </div> <h2>Case 2: </h2> <div v-for="(item, index2) in users2" :key="'2'+index2"> <span>{{item.name}}:</span><span :class="[item.name in selectedUsers ? selectedUsers[item.name] : 'none']">{{item.name in selectedUsers ? selectedUsers[item.name] : 'none'}}</span><button @click="markUser2(item)">Mark</button> </div> </div>

Answer 2

You can use $event.target on click if you just need to toggle css class. fiddle here

But it's true that it's easier if a user has a status like marked = true/false for example, you just need to bind class like :

<input :class="{ 'green-border': user.marked, 'red-border': !user.marked }">

Answer 3

For Vue3, you can also store the index of the selected element

<ul role="list" class="">
  <li class="relative" v-for="(image, index) of images" :class="selectedImage == index? 'border-indigo-500 border-2': 'border-transparent'" >
    <div @click="selectedImage = index" class="">
      <img :src="image" alt="" class="object-cover pointer-events-none group-hover:opacity-75">
    </div>
  </li>
</ul>