VueJS Выберите только один элемент в v-for

1

Я использую Vue v2

Я пытаюсь изменить только свойства выбранного элемента. См., Когда ответ будет отмечен после щелчка, он должен измениться на красный цвет с текстом, который говорит "Снять отметку". И наоборот: если кнопка снова нажата (теперь она будет говорить "Снять отметку"), она должна измениться до зеленого цвета, а текст будет "Марк". Увы, это работает... Тем не менее, мой код применяет изменения к каждому элементу внутри v-for; Я хочу, чтобы это произошло с выбранным элементом.

Я подумал об использовании компонента, чтобы проверить, не изменилось ли что-то, но сначала я хотел бы посмотреть, есть ли для этого решения. Любая помощь будет оценена

Вот мой код:

<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>

Теперь для скрипта:

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;
                });
    }

}
  • 0
    Вы храните выбранное состояние в любом месте?
  • 0
    Я так не думаю, как я могу это сделать и чем это поможет?
Показать ещё 3 комментария
Теги:
arrays
vue.js
vuejs2

2 ответа

1
Лучший ответ

Вы можете использовать $event.target при щелчке, если вам просто нужно переключить класс css. скрипка здесь

Но верно, что проще, если у пользователя есть статус, например, marked = true/false, вам просто нужно связать класс следующим образом:

<input :class="{ 'green-border': user.marked, 'red-border': !user.marked }">
Поделиться
  • 0
    Да! Это как раз то, что мне было нужно. Я полностью игнорировал этот факт (у меня действительно есть свойство с именем user_is_marked), и теперь оно работает полностью. Спасибо за ваш ответ, а также Сфинксу
  • 0
    @NoviceMav прямое касание дом не рекомендуется. Для Vue мы предпочитаем «управляемый данными» способ
1

Проблема, которую my code applies the change to every element, вызванному каждым пользователем в v-for="user in users" использует один и тот же объект, указывающий, что он отмечен или нет.

Если у ваших данных users есть одно свойство, например статус, чтобы сохранить текущий статус (например, отметьте отметку, отметьте и т.д.), Это очень просто, просто переключитесь на следующий статус при нажатии кнопки отметки.

Если ваши данные users не имеют этого свойства, вам необходимо создать один словарь, а затем сохранить пользователей, которые уже нажали в качестве ключа, статус для пользователя будет значением.

Ниже приведена одна демонстрация:

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/[email protected]/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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню