Question

我是VueJs的新手，我遇到了这个小问题，首先是我的示例HTML代码：

O(n)

我完全按照文档，我使用PHPStorm作为编辑器，但我的功能改变了'isActive＆＃39;变量不起作用我有这个错误：

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

非常感谢任何帮助。

Answer 1

这听起来像PHPStorm警告。忽略它，或尝试像vs代码或原子的Vue感知编辑器。你的代码对我来说很好。

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>

解决该问题的方法是在自定义组件调用中传递class属性，如下所示

<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#With-Components

在html输出中，将类active添加到tr元素

Vue Js v-bind：类语法不起作用？

2 个答案: