在vuejs中评论帖子时禁用循环中的所有文本区域

<template>
  <div>
    <!-- 假设comments是从数据中获取的评论数组 -->
    <div v-for="(comment, index) in comments" :key="index">
      <textarea
        :disabled="isAllTextAreasDisabled"
        placeholder="Write a comment..."
      ></textarea>
    </div>
    <button @click="disableAllTextAreas">Disable All Text Areas</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const comments = ref([
      // 假设这是从服务器获取的评论数据
      { id: 1, text: 'First comment' },
      { id: 2, text: 'Second comment' },
      // ...更多评论
    ]);

    const isAllTextAreasDisabled = ref(false);

    function disableAllTextAreas() {
      isAllTextAreasDisabled.value = true;
    }

    return {
      comments,
      isAllTextAreasDisabled,
      disableAllTextAreas
    };
  }
};
</script>