Question

如何使用v-if做两件事

显示消息和 2）将message.hasSublocationOutage设置为true。

因此，如果有中断显示消息并将标志设置为true message.hasSublocationOutage或将true传递给方法

      <div v-if="!subLocation.outageTag.length - 1">
         There is a problem
      </div>

Answer 1

您的设计中似乎存在一些固有的缺陷，但您可以调用一种方法来计算是否同时显示和设置message。

HTML

<div v-if="canShowAndCalculate()">
    There is a problem
</div>

JS

export default {
    methods: {
        canShowAndCalculate() {
            if (subLocation.outageTag.length - 1) return false;

            // else
            message.hasSublocationOutage = true
            return true
        }
    }
}

安德烈提到，这是非常不可取的。在条件逻辑中产生副作用会隐藏核心逻辑。相反，应该在数据更改时更新布尔条件，而不是相反。

作为旁注，您可以使用像V Sambor这样的计算属性来提高性能，但是由于计算属性应该始终缓存并流出，因此可以进一步隐藏“错误”实现，而您可以期待一种方法做两件事，即使在这种情况下它是不可取的。

Answer 2

你可以为此做一个计算方法与@David L几乎相同，只回答这会缓存你的显示结果，直到某些相关变量改变它们的值。

computed: {
  display() {
    if (this.subLocation.outageTag.length - 1) {
      return false;
    }

    this.message.hasSublocationOutage = true;
    return true;
  }
}

然后在Html中你可以做到：

<div v-if="display()">
    There is a problem
</div>

在v-if块中设置值

2 个答案: