Javascript 设置一个行项目'；主动'；在vue中的某个时间

我在vue模板中有一个小的无序列表：

<ul style="border-bottom:none !important; text-decoration:none">
     <li class="commentToggle" v-bind:class="{active:commentActive}" v-on:click="setInputName('new')">New Comment</li>
     <li class="commentToggle" v-bind:class="{active:commentActive}" v-on:click="setInputName('note')">Note</li>
</ul>

---

这是功能性的，但当我点击其中一个时，它显然会将两个输入都设置为活动。如何更改此选项以仅将单击的行项目设置为活动？

您需要使用唯一标识符来确定哪个注释处于活动状态。以最基本的方式使用当前设置：

<li class="commentToggle" 
        v-bind:class="{active:commentActive === 'new'}" 
        v-on:click="setInputName('new')">
    New Comment
</li>
<li class="commentToggle" 
        v-bind:class="{active:commentActive === 'note'}" 
        v-on:click="setInputName('note')">
    Note
</li>

---

我们所做的调整是为了确保

commentActive

与我们使用的

str

匹配。您可以将该标识符更改为其他任何内容，如果您愿意，还可以传递其他参数。

当然，这现在是有意义的。我很感激，我想有时候我会试图用vue来过度复杂化。谢谢

<li class="commentToggle" 
        v-bind:class="{active:commentActive === 'new'}" 
        v-on:click="setInputName('new')">
    New Comment
</li>
<li class="commentToggle" 
        v-bind:class="{active:commentActive === 'note'}" 
        v-on:click="setInputName('note')">
    Note
</li>

setInputName(str) {
  this.inputName = str;
  this.commentActive = str;
},