如何向Vue数组Props添加UI相关数据？Inertia.js不可修改Props的处理方案

在Inertia.js的Vue组件里碰到这种情况太常见了——Props是只读的，没法直接给元素加UI状态，但又需要本地维护is_active、is_expanded这类属性。下面给你三个实用的方案，根据你的需求选就行：

1. 用计算属性（Computed）生成带UI属性的副本 #

这是最直接的方案，适合不需要持久化UI状态的场景（比如组件重新渲染后状态可以重置）。计算属性会响应Props的变化，自动更新副本，而且完全不会修改原Props：

<script setup>
import { computed } from 'vue'

// 定义接收的Props
const props = defineProps({
  posts: {
    type: Array,
    required: true
  }
})

// 生成带UI属性的本地副本
const uiPosts = computed(() => {
  return props.posts.map(post => ({
    ...post, // 复制原帖子数据
    is_active: false, // 默认UI状态
    is_expanded: false
  }))
})
</script>

<template>
  <div v-for="post in uiPosts" :key="post.id" class="post-item">
    <h3 @click="post.is_active = !post.is_active">
      {{ post.title }}
      <span v-if="post.is_active" class="active-badge">已激活</span>
    </h3>
    <div v-if="post.is_expanded" class="post-content">
      {{ post.content }}
    </div>
    <button @click="post.is_expanded = !post.is_expanded">
      {{ post.is_expanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

优点：实现简单，响应式自动同步Props变化；缺点：组件重新渲染（比如父组件更新Props）时，UI状态会被重置。

2. 用Ref+Watch维护带状态的本地副本 #

如果需要保留UI状态（比如用户展开了某个帖子，即使后端返回新的帖子列表，展开状态也要保留），可以用ref存储本地数组，再通过watch监听Props变化，同步时保留已有状态：

<script setup>
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  posts: {
    type: Array,
    required: true
  }
})

// 本地存储带UI状态的帖子数组
const uiPosts = ref([])

// 同步Props和本地状态的方法
const syncUiPosts = () => {
  // 先把已有UI状态存成以post.id为键的对象，方便后续合并
  const existingStates = uiPosts.value.reduce((acc, post) => {
    acc[post.id] = {
      is_active: post.is_active,
      is_expanded: post.is_expanded
    }
    return acc
  }, {})

  // 生成新的数组，合并原数据和已有状态
  uiPosts.value = props.posts.map(post => ({
    ...post,
    // 有已有状态就用，没有就用默认值
    is_active: existingStates[post.id]?.is_active ?? false,
    is_expanded: existingStates[post.id]?.is_expanded ?? false
  }))
}

// 组件挂载时初始化
onMounted(syncUiPosts)
// 监听Props变化，实时同步
watch(() => props.posts, syncUiPosts, { deep: true })
</script>

<template>
  <!-- 模板用法和方案1一样 -->
  <div v-for="post in uiPosts" :key="post.id" class="post-item">
    <h3 @click="post.is_active = !post.is_active">
      {{ post.title }}
      <span v-if="post.is_active" class="active-badge">已激活</span>
    </h3>
    <div v-if="post.is_expanded" class="post-content">
      {{ post.content }}
    </div>
    <button @click="post.is_expanded = !post.is_expanded">
      {{ post.is_expanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

优点：能持久化UI状态，Props更新时不会丢失用户操作；缺点：代码量稍多，需要手动处理状态合并。

3. 单独存储UI状态（与原数据分离） #

如果帖子数量很大，或者想彻底把业务数据和UI状态分开，可以用一个单独的ref对象存储UI状态，键为帖子的id：

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

const props = defineProps({
  posts: {
    type: Array,
    required: true
  }
})

// 单独存储UI状态，结构：{ [postId]: { is_active: boolean, is_expanded: boolean } }
const postUiStates = ref({})

// 获取某个帖子的UI状态，提供默认值
const getUiState = (postId) => {
  return postUiStates.value[postId] ?? { is_active: false, is_expanded: false }
}

// 切换激活状态的方法
const toggleActive = (postId) => {
  const currentState = getUiState(postId)
  postUiStates.value[postId] = {
    ...currentState,
    is_active: !currentState.is_active
  }
}

// 切换展开状态的方法
const toggleExpand = (postId) => {
  const currentState = getUiState(postId)
  postUiStates.value[postId] = {
    ...currentState,
    is_expanded: !currentState.is_expanded
  }
}
</script>

<template>
  <div v-for="post in posts" :key="post.id" class="post-item">
    <h3 @click="toggleActive(post.id)">
      {{ post.title }}
      <span v-if="getUiState(post.id).is_active" class="active-badge">已激活</span>
    </h3>
    <div v-if="getUiState(post.id).is_expanded" class="post-content">
      {{ post.content }}
    </div>
    <button @click="toggleExpand(post.id)">
      {{ getUiState(post.id).is_expanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

优点：内存效率高（不需要复制整个数组），状态和数据完全分离，避免意外修改；缺点：模板里需要调用方法获取状态，写法稍繁琐。

内容的提问来源于stack exchange，提问作者lowkey