Question

我正在呈现带有v-for的电子邮件列表，管理员可以删除该列表。根据删除电子邮件的过程是否在进行，我需要将“正在加载”状态设置为true或false。我知道如果使用对象，可以向对象添加加载属性并在remove函数中设置该状态，但是是否可以将列表项之一设置为状态，同时将列表保留为字符串数组？ / p>

data: {
   admins: [foo@gmail.com, bar@gmail.com]
}

<div class="admin-row" :class="{active : editAdmins}" v-for="(admin, index) in admins" :key="index">
   <div class="remove-admin">
      <fa v-if="!loading" @click="removeAdmin(admin)" icon="minus-circle"/>
      <fa v-if="loading" class="remove-admin-loader" icon="spinner" spin/>
   </div>
</div>

因此，基本上，我想在单击removeAdmin时将loading变量设置为true，但是我需要在v-for语句中对变量进行范围限定。

Answer 1

似乎您必须使用加载变量创建另一个数组，该变量保留与admins数组相同的元素顺序，然后设置loadings [index]变量或将admins数组更改为对象数组，而不是字符串数组。在这种情况下，一系列管理员应该看起来像这样：

admins: [
    {mail: 'foo@gmail.com', loading: false},
    {mail: 'bar@gmail.com', loading: true}
]

Answer 2

这里的问题是数组中的内容是字符串，您不能直接将属性添加到字符串中。

要解决这个问题，我们需要创建一个简单的类，将string包装到object中，秘密就在toString方法中。

class StringObject {
    constructor(value) {
        this.value = value;
  }

  toString() {
    return this.value;
  }
}

然后在removeAdmin上添加一个条件，将字符串转换为StringObject：

if (!(this.admins[index] instanceof StringObject)) {
    this.$set(this.admins, index, new StringObject(this.admins[index]))
}

现在，您可以在模板中将其用作：

{{ admin.toString() }}

只需在此处检查整个工作示例：https://jsfiddle.net/eywraw8t/235969/

尽管这可以回答您的问题，但我不建议您使用这种方法，因为它只会增加代码的复杂性，而且看起来也不basic。 < / p>

最好的方法是将clearly的所有正在组件中使用的变量声明为data属性。因为这样可以更轻松地了解您的组件

另一个提示：

在处理列表时，避免将整个对象传递给方法。在示例代码中，您将整个admin对象传递到removeAdmin方法中。相反，使用index会更加容易和快捷。您可以在上面的JS小提琴示例中看到如何使用索引来处理列表，尤其是删除时。

删除项目时，我们仅使用splice()并将index传递到其中。因此，删除数组中的项就像这样简单：

this.admins.splice(index, 1);

但是，如果要使用对象引用，则需要先在数组中找到该对象的索引，这会使您执行额外的步骤，而且速度也较慢。

在v-for中渲染状态而不在数组[vue]中设置状态

2 个答案: