Vue.js自定义组件双向绑定失效，单向绑定功能正常

Hey there! Let's work through this two-way binding issue with your Vue table and row components. This is a super common pitfall when dealing with nested components and object arrays, so let's break down what's likely going wrong and how to fix it.

First: Understand Vue's One-Way Data Flow #

The root issue here is probably related to Vue's core principle of one-way data flow. Your row component is receiving the row data (including the checked property) as a prop, and if you're trying to use v-model directly on that prop, Vue will block it (and probably throw a warning in the console). Props are read-only from the child component's perspective—you can't modify them directly and expect the parent's model to update.

Fix 1: Emit Events from the Row Component #

Instead of trying to bind v-model to the prop, you'll need to:

1. Bind the checkbox's checked state to the prop value
2. Listen for the checkbox's change event, then emit a custom event to notify the parent component of the update
3. Have the parent component update the original model array

Here's how that looks in code:

Row Component (Row.vue)

<template>
  <tr>
    <td>
      <input
        type="checkbox"
        :checked="rowData.checked"
        @change="onCheckedChange"
      >
    </td>
    <!-- Your other table cells here -->
  </tr>
</template>

<script>
export default {
  props: {
    rowData: {
      type: Object,
      required: true
    },
    // Optional: Pass the row index if you want simpler parent updates
    rowIndex: {
      type: Number,
      required: true
    }
  },
  methods: {
    onCheckedChange(event) {
      // Emit an event with the new checked state and row index
      this.$emit('row-checked-updated', this.rowIndex, event.target.checked);
    }
  }
}
</script>

Table Component (Table.vue)

<template>
  <table>
    <tbody>
      <Row
        v-for="(row, index) in tableData"
        :key="row.id"
        :row-data="row"
        :row-index="index"
        @row-checked-updated="updateRowChecked"
      />
    </tbody>
  </table>
</template>

<script>
import Row from './Row.vue';

export default {
  components: { Row },
  data() {
    return {
      tableData: [
        { id: 1, checked: false, /* other properties */ },
        { id: 2, checked: true, /* other properties */ }
      ]
    };
  },
  methods: {
    updateRowChecked(index, newCheckedState) {
      // Use Vue's $set to ensure reactivity (critical for object properties)
      this.$set(this.tableData[index], 'checked', newCheckedState);
      
      // Alternatively, you can create a new array to trigger reactivity (equally valid):
      // this.tableData = this.tableData.map((row, i) => {
      //   if (i === index) return { ...row, checked: newCheckedState };
      //   return row;
      // });
    }
  }
}
</script>

Fix 2: Ensure Your Model is Fully Reactive #

Another possible issue: if your checked property wasn't present on the objects when you initialized the tableData array, Vue might not be tracking changes to it. Vue can't detect properties added after an object is created unless you use Vue.set (or this.$set in components).

Make sure every object in your initial array includes the checked property:

// Good: Initialize with checked property
tableData: [
  { id: 1, checked: false, name: "Item 1" },
  { id: 2, checked: true, name: "Item 2" }
]

// If you add rows later, always include checked:
addNewRow() {
  this.tableData.push({
    id: Date.now(),
    checked: false,
    name: "New Item"
  });
}

Bonus: Simplify with .sync Modifier #

If you want to clean up the code a bit, you can use Vue's .sync modifier to handle the event-emitting pattern automatically. Here's how that works:

Row Component Adjustment

onCheckedChange(event) {
  const updatedRow = { ...this.rowData, checked: event.target.checked };
  this.$emit('update:rowData', updatedRow);
}

Table Component Adjustment

<Row
  v-for="(row, index) in tableData"
  :key="row.id"
  :row-data.sync="tableData[index]"
/>

Vue will automatically listen for the update:rowData event and update the tableData array for you—no need for the updateRowChecked method!

Key Takeaways #

• Never modify props directly in child components—always use events to communicate changes to the parent.
• Ensure all object properties you want to be reactive are present when the object is initialized (or use $set to add them later).
• Use either custom events + parent updates or the .sync modifier to keep your model and UI in sync.

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