如何在Salesforce LWC中根据配置文件显示/隐藏按钮

{
  "buttons": [
    {
      "id": "button1",
      "visible": true
    },
    {
      "id": "button2",
      "visible": false
    }
  ]
}

import { LightningElement, wire } from 'lwc';
import configData from '@salesforce/resourceUrl/configData';

export default class MyComponent extends LightningElement {
  config;

  @wire(configData)
  loadConfig({ error, data }) {
    if (data) {
      this.config = JSON.parse(data);
    } else if (error) {
      console.error('Error loading config file');
    }
  }
}

<template>
  <template for:each={config.buttons} for:item="button">
    <lightning-button key={button.id} if:true={button.visible} label="Button" onclick={handleButtonClick}></lightning-button>
  </template>
</template>

handleButtonClick(event) {
  // 处理按钮点击事件
}

connectedCallback() {
  // 更新按钮状态
  if (this.config) {
    this.config.buttons.forEach(button => {
      const buttonElement = this.template.querySelector(`[key="${button.id}"]`);
      if (buttonElement) {
        buttonElement.visible = button.visible;
      }
    });
  }
}