Как менять класс блока при клике на его элемент?

Question

[svilkov87]

Всем привет!
Есть стор ( Vuex ):

Vue.use( Vuex );

const store = new Vuex.Store({
    state: {
        list: [
          { title: 'option_1' },
          { title: 'option_2' },
          { title: 'option_3' },
          { title: 'option_4' },
        ],
        count: 0
    },
    mutations: {
        itemLike(  ) {

        },
    },
    actions: {},
    getters: {},
});

и шаблон с кодом:

<template>
    <div class="app-list">
        <div class="app-list__text-fied-wrapper">
            <input class="app-list__textarea" v-model="value" @keyup.enter="addItem()">
        </div>
        <ul class="app-list__ul">
            <li class="app-list__li" v-for="item in listData()" :key="item.title">
                <span class="app-list__title">{{ item.title }}</span>
                <i class="app-list__icon  far fas fa-thumbs-up" @click="like(item)">{{ count }}</i>
            </li>
        </ul>
    </div>
</template>

    export default {
        name : 'ap-list',
        data() {
            return {
                value: '',
            };
        },
        computed: {
            count () {
                return this.$store.state.count
            }
        },
        methods : {
            listData() {
                return this.$store.state.list;
            },
            like(item) {
                this.$store.commit('itemLike', item); // обработчик  на иконки.
            }
        },
    };

Как написать логику в store, при которой при клике на иконку .app-list__icon, менялся бы класс например на "app-list__li_hidden" у его родителя app-list__li?

Answer 1

[0xD34F]

Добавить объектам, на основе которых создаются блоки, свойство, которое будет отвечать за наличие класса:

state: {
  items: [
    { title: '...', liked: false },
    { title: '...', liked: false },
    ...

Сделать мутацию, которая будет переключать значение этого свойства:

mutations: {
  toggleLike: (state, item) => item.liked = !item.liked,
  ...

Назначать класс в зависимости от значения этого свойства, и вызывать мутацию по клику:

<li
  v-for="n in $store.state.items"
  :class="{ liked: n.liked }"
  @click="$store.commit('toggleLike', n)"
  ...

Comments

[svilkov87]

У вас @click по li. А нужно при клике на span в вашем примере менять класс у li.

[0xD34F]

svilkov87, вот прям ждал этой хрени. Давайте уточним - вы и впрямь настолько глупы, что неспособны самостоятельно переместить обработчик клика?

[svilkov87]

0xD34F, да

[0xD34F]

svilkov87,

да

Ы-ы-ы.

Делаете так:

1. Выделяете обработчик
   
2. Нажимаете ctrl+c
   
3. Нажимаете del
   
4. Устанавливаете курсор внутрь открывающего тэга интересующего вас элемента
   
5. Нажимаете ctrl+v