在 vue 中一次设置一个订单项“活动”

Question

我在一个 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>

然后我有一个commentActive的数据变量和一个我调用的函数来设置输入名称：

data () {
    return {
        commentActive: false,
    }
},
methods: {
   setInputName(str) {
     this.inputName = str;
     this.commentActive = true;
   },

}

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

Answer 1

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

<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;
},

我们所做的调整是为了确保commentActive 与我们使用的str 匹配。您可以将该标识符更改为其他任何内容，并根据需要传递其他参数。