如何在Vue的v-for迭代中只调用一次方法？

Posted 2023-02-22

【中文标题】如何在Vue的v-for迭代中只调用一次方法？

【英文标题】：How to call a method only once in v-for iteration in Vue?

【发布时间】：2021-07-13 04:39:50

【问题描述】：

我有一种情况，“v-for”为每次迭代调用 2 个方法。当用户按下按钮时调用它们。

用户告诉组件 v-for 将运行的迭代次数（itemsDrawn 属性）。

"itemsDrawn" 属性可以在 0 到 4 之间变化。 v-for 在每次迭代中抽取引导卡（可以是 0 到 4）

这些方法（方法 A 和 B）返回一个整数/代码或字符串（我可以决定），并且在模板内我需要根据为每个函数提供的代码（数据类型）显示一些消息。

因此，根据这些代码，我可以选择要在 UI 中显示的文本。

截取的代码是这样的：

<div
  class="card text-center mt-5"
  style="width: 18rem"
  v-for="(item, index) in itemsDrawn"
  :key="index"
>
  <div class="card-header">Item:  item  -  methodA() </div>
  <div class="card-body">
    <h5 class="card-title"> methodB() </h5>
    <p class="card-text">
      'This is the message based on both methodA() and methodB()'
      'I NEED TO CALL A METHOD HERE 
    </p>
  </div>
</div>

方法

  methods: 
    methodA()
      return this.workItemsTypes[this.randomNumber(0,9)];
    ,
    methodB() 
      return this.classesOfServices[this.randomNumber(0,7)];
    ,
  ,

输出是这样的：

查看输出的第一列，卡片标题中的“Melhoria”和卡片正文中的“Padrão”应该显示个性化消息；每张卡都会发生同样的情况。

如果我在 p-card-text 中调用这些方法，它们会给我其他值。因此，这将是 4 次调用，每个方法 2 次。

那么，我怎样才能只调用它们一次，保留它们的输出并根据它们的数据显示一条消息？

如何在每个调用的方法中保留这两个值并在以后使用它们？

【问题讨论】：

Vue 的快速经验法则...不要使用方法来渲染模板的某些部分。请改用计算属性。见Method vs Computed in Vue

“基于用户操作”是什么意思。您的伪代码模板示例没有传达您要执行的操作。你认为你可以改进它以使其更清晰吗？

将随机值存储在data状态，不要在渲染中使用随机性。

【参考方案1】：

我不确定这是否是最好的设计，但根据 cmets 我可以找到答案。

classOfServiceItem 和 workItemTypeItem 都是状态变量，我在通过对应的数据数组检索之前保存数据。

保存状态中的随机数

  state: 
    classOfServiceItem: 0,
    workItemTypeItem: 0,
  ,
  methods: 
    classOfService() 
      // here I save the state
      this.classOfServiceItem = this.randomNumber(0, 7);
      return this.classesOfServices[this.classOfServiceItem];
    ,
    workItemType() 
      // here I save the state
      this.workItemTypeItem  = this.randomNumber(0, 0);
      return this.workItemsTypes[this.workItemTypeItem];
    ,


  ,

使用每次迭代的状态

 
        <div class="card-body mycard-body">
          <h5 class="card-title"> classOfService() </h5>
          <p class="card-text">
            'Here I use the random    
            'This is the message based on both 
 classesOfServices[classOfServiceItem]   and 
 workItemsTypes[workItemTypeItem] '
          </p>
          <button type="button" @click="pullItem" class="btn btn-primary">
            Puxar
          </button>
        </div>