javascript - Vue 按钮，仅在检查数组/对象的值后调用方法

Question

我有一个调用函数的工作按钮，但我想添加一个中间层，它检查 listItems 数组中每个项目的 status 值，以确保之前所有项目的状态都已完成调用该方法。

按钮调用工作正常，但我仍在努力解决如何检查所有按钮的状态并在它们不完整时触发错误或在它们完成时调用该方法。

这是大部分代码:

<button class="btn  btn-block" v-on:click="completeItem" type="button" role="button" id="completeItemButton" aria-expanded="false">
        Complete
    </button>

    <p>Must complete all before closing out the item</p>


    vue code:

        export default{

            data() {
                return: {
                    listItems: [
                        {
                        id: 1,
                        status: 'Complete'
                        },
                        {
                        id: 2,
                        status: 'Complete'
                        }
                        {
                        id: 3,
                        status: 'Open'
                        }
                    ]
                }
            },
            methods: {

                completeItem() {
                    //more code upon completion
                }
            }
        }

Answer 1

要查看数组中的所有项目是否都符合条件，可以使用 every 。这是一个例子:

completeItem() {
  const areAllComplete = this.listItems.every(item => item.status === 'Complete');
  if (areAllComplete) {
    // TODO
  }
}