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

Posted 2023-02-23

【中文标题】在 vue 中一次设置一个订单项“活动”

【英文标题】：setting one line item 'active' at a time in vue

【发布时间】：2020-07-11 02:14:28

【问题描述】：

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

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

【参考方案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 匹配。您可以将该标识符更改为其他任何内容，并根据需要传递其他参数。

【讨论】：

当然，现在说得通了。我很感激，我想有时我会尝试使 vue 过于复杂。谢谢！