Привязка к нескольким именам классов с Laravel & Vue.js - PullRequest
Новая
       17

Привязка к нескольким именам классов с Laravel & Vue.js

0 голосов
/ 17 октября 2019

У меня есть компонент Vue, который отображает список элементов. Я могу пометить любой элемент как «активный» (логическое значение). Это значение сохраняется в базе данных.

Например, у меня может быть всего пять предметов. Три из них могут быть помечены как «активные», остальные два - нет.

Когда моя страница загружается, активные / не активные данные поступают с моего контроллера, и я передаю данные в свой компонент vue как свойство,Свойство имеет атрибут active, который может быть включен / выключен. Это значение хранится в базе данных как логическое значение.

Вот так выглядит мой компонент: 

<template>
    <div class="item" :class="{'active' : isActive}" @click="handleClick($event, item)">
        <div v-if="item.icon" class="item-icon">
            <i :class="item.icon"></i>
        </div>
        <div class="item-title">
            {{ item.title }}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Item',
        data() {
            return {
                isActive: false,
            }
        },
        methods: {
            async handleClick(event, item) {
                try {
                    let response = await axios.patch(`/path/${item.id}`, {
                        title: item.title,
                        active: !this.isActive,
                    });

                    if (response.status === 200) {
                        this.isActive = !this.isActive;
                        console.log('isActive: ', this.isActive);
                    } else {
                        console.error('Error: could not update item. ', response);
                    }
                } catch (error) {
                    console.error('Error: sending patch request. ', error);
                }
            },
        },
        props: {
            item: {
                type: Object,
                required: true,
            },
        },
    }
</script>

В целом, система работает. Мои запросы обрабатываются правильно, а данные обновляются корректно.

Если я изменю свой шаблон следующим образом: 

<div class="item" :class="{'active' : isActive}"
     @click="handleItemClick($event, item)">

Я вижу, что обновление класса / пользовательского интерфейса корректно. Но, поскольку исходные данные поступают из Laravel (контроллера), мне нужно иметь два класса.

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

РЕДАКТИРОВАТЬ

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

<div class="item" :class="{'active' : isActive, 'active': item.active}"
     @click="handleClick($event, item)">

Логика все еще работает (когда я обновляю страницу), но пользовательский интерфейс не обновляется динамически.

Ответы [ 2 ]

2 голосов
/ 17 октября 2019

Вы можете настроить вычисляемое свойство, которое учитывает item.active и isActive в вашем компоненте, например: 

computed: {
  bindActive() {
    return this.isActive || this.item.active;
  }
}

Таким образом, вы можете настроить только один класс в синтаксисе вашего шаблона: 

<div class="item" :class="{'active' : bindActive}"  @click="handleItemClick($event, item)">...</div>
0 голосов
/ 17 октября 2019

Сначала я хочу поблагодарить всех за их предложения;это была огромная помощь!

Я надеюсь, что смогу помочь другим с этим, вот что я придумала. 

<template>
    <div class="item" :class="{'active': isActive}"
         @click="handleClick($event, item)">
        <div v-if="item.icon" class="item-icon">
            <i :class="item.icon"></i>
        </div>
        <div class="item-title">
            {{ item.title }}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Item',
        data() {
            return {
                isActive: this.item.active,  // <-- this was my error
            }
        },
        methods: {
            async handleClick(event, item) {
                try {
                    let response = await axios.patch(`/path/${item.id}`, {
                        title: item.title,
                        active: !this.isActive,
                    });

                    if (response.status === 200) {
                        this.isActive = response.data.item.active;
                    } else {
                        console.error('Error: could not update item. ', response);
                    }
                } catch (error) {
                    console.error('Error: sending patch request. ', error);
                }
            },
        },
        props: {
            item: {
                type: Object,
                required: true,
            },
        },
    }

Надеюсь, это кому-нибудь поможет!

...