Vue Js v-bind: синтаксис класса не работает?

Question

Я новичок в VueJs, и у меня возникла эта небольшая проблема, сначала вот мой пример HTML-кода:

<div class="search">

        <input :class="{ longwidth : isActive }" v-show="showInput" type="text">
        <img @click="hideImgShowInput" v-show="hideImg" src="Assets/images/search-icon.png">

</div>

Я точно следовал документации, и я использую PHPStorm в качестве редактора, но моя функция, которая изменяет переменную 'isActive', не работает, у меня появляется эта ошибка:

Attribute :class is not allowed here

Любая помощь приветствуется.

Answer 1

Это звучит как предупреждение PHPStorm. Игнорируйте его или попробуйте редактор с поддержкой Vue, такой как vs code или atom. Ваш код выглядит хорошо для меня.

Answer 2

Эта ошибка приводит к тому, что компонент не отображается

Мой случай похож на следующий

<script type="text/x-template" id="game-row">
    <tr>
        <td>{{ title }}</td>
        ...
    </tr>
</script>

Таким образом, при добавлении атрибута class к элементу tr указанное сообщение

<script type="text/x-template" id="game-row">
    <tr :class="{ active: isActive }">
        <td>{{ title }}</td>
        ...
    </tr>
</script>

Чтобы исправить это, необходимо передать атрибут класса в вызове пользовательского компонента, как показано ниже.

<script type="text/x-template" id="game">
    <div>
        <p v-if="isLoading">Loading...</p>
        <template v-else>
            <table>
                <caption>Game {{ title }}</caption>
                <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        is="game-day-row"
                        v-for="game of games"
                        :class="{ 'active': isActive }" <!-- Here I set the class -->
                        :key="game.id"
                        :game="game"
                    ></tr>
                </tbody>
            </table>
        </template>
    </div>
</script>

Вы можете прочитать об этом в руководстве по классам и стилям vue.

https://vuejs.org/v2/guide/class-and-style.html

В выводе html класс active добавляется к элементу tr