Vue.js新手求助：如何避免修改Prop并跨组件修改表格数据？

Hey there! Let's break down how to fix this and set up a clean, maintainable way to handle your table data—including fetching and later filtering it. The main issue right now is that your Table.vue is both fetching data and rendering it, while your parent Files.vue isn't involved in managing that data. This makes it hard to modify the data (like filtering) from the parent.

Step 1: Refactor Table.vue into a Presentational Component #

We'll turn Table.vue into a component that only renders data passed to it via props—no more fetching data internally. This keeps it focused on one job: displaying the table.

<template>
  <v-simple-table class="mt-5" id="tableOs" dense>
    <thead>
      <tr>
        <th v-for="h in headers" :key="h.value">{{ h.text }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.customer }}</td>
        <td>{{ item.neighbor }}</td>
      </tr>
    </tbody>
  </v-simple-table>
</template>

<script>
export default {
  // Add proper prop validation to catch bugs early
  props: {
    headers: {
      type: Array,
      required: true
    },
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

Now this component only cares about receiving data and rendering it—all data management logic will live in the parent.

Step 2: Update Files.vue to Manage Data #

The parent component (Files.vue) will take over fetching data, storing it, and handling modifications (like filtering). We'll pass the processed data down to Table.vue via props.

<template>
  <v-container id="dashboard" fluid tag="section">
    <!-- Example filter input for customer names -->
    <v-text-field
      label="Filter by Customer Name"
      v-model="filterQuery"
      class="mb-4"
    />
    <v-btn @click="modify()">Modify Sample Data</v-btn>
    <!-- Pass headers and filtered data to the Table component -->
    <Table :headers="tableHeaders" :items="filteredItems" />
  </v-container>
</template>

<script>
// Import the Table component directly (async import works too if you need code splitting)
import Table from './components/Table.vue'

export default {
  components: {
    Table
  },
  data() {
    return {
      tableHeaders: [
        { text: 'Id', value: 'id' },
        { text: 'Name', value: 'customer' },
        { text: 'Neighbor', value: 'neighbor' }
      ],
      originalItems: [], // Store the full, unfiltered dataset
      filterQuery: '' // Track user's filter input
    }
  },
  computed: {
    // Dynamically filter items based on the user's query
    filteredItems() {
      if (!this.filterQuery) return this.originalItems
      return this.originalItems.filter(item => 
        item.customer.toLowerCase().includes(this.filterQuery.toLowerCase())
      )
    }
  },
  async created() {
    // Fetch data in the parent component
    try {
      const res = await fetch("http://localhost:5000/buscarx/3", { method: "GET" })
      const data = await res.json()
      this.originalItems = data
    } catch (err) {
      console.error('Failed to fetch data:', err)
    }
  },
  methods: {
    modify() {
      // Example: Update the original data (table will auto-update)
      if (this.originalItems.length > 0) {
        // Clone the array to avoid direct mutation (good practice)
        const updatedItems = [...this.originalItems]
        updatedItems[0].customer = 'Updated Customer Name'
        this.originalItems = updatedItems
        console.log('Data modified:', this.originalItems[0])
      }
    }
  }
}
</script>

Why This Works Better #

• Single Responsibility: Table.vue only renders data, while Files.vue handles state (fetching, filtering, modifications). This makes both components easier to debug and extend.
• Unidirectional Data Flow: Data flows from parent to child via props, which follows Vue's recommended pattern—no confusing cross-component data mutations.
• Easy Extensibility: Adding features like sorting, pagination, or advanced filters is straightforward now, since all data logic lives in the parent component.

Quick Fixes to Your Original Code #

• In your original Files.vue, you registered the component as Table but used <TableOS />—that's a typo we fixed.
• Your Table.vue prop pitems lacked type validation; adding that helps catch bugs early.
• You were initializing items as this.pitems but overwriting it in created()—moving fetch logic to the parent eliminates this conflict.

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