Ich habe die EditTransaction-Komponente und nenne sie so:
<edit-transaction
v-if="editableTransaction.id === transaction.id"
:key="'transaction'+transaction.id+etcount"
:class="{'bg-red-300': type === 'expense', 'bg-green-300': type === 'income'}"
:groups-prop="modelValue"
:transaction="transaction"
class="planning-transactions-item px-10 rounded-2xl w-[90%]"
@close="editableTransaction = {id: null}">
</edit-transaction>
Wie Sie sehen, sende ich darin ein Transaktionsobjekt. Da es sich um einen Editor handelt, möchte ich nicht, dass das Transaktionsobjekt reaktiv ist. Wenn jemand den Editor schließt, möchte ich das ursprüngliche Transaktionsobjekt und nicht das geänderte Transaktionsobjekt. Wenn ich also Recht habe und den Proxy entfernen möchte, füge ich ihn in den Editor ein:
const form = toRaw(props.transaction)
In der Editor-Vorlage gibt es einige Asset-Komponenten, deren V-Modell-Werte an das Formularobjekt gebunden sind
<div class="flex gap-5 w-full">
<FormInput id="et-date" v-model="form.due_date" class="et-fields tw-fields w-[150px]"
placeholder="Date"
type="date"
@keyup.enter="saveChanges"></FormInput>
<FormInput id="et-name" v-model="form.name" class="et-fields tw-fields" placeholder="Name"
@keyup.enter="saveChanges"></FormInput>
<FormInput id="et-value" v-model="form.value" class="et-fields tw-fields" mask-thousand
placeholder="Value"
@keyup.enter="saveChanges"></FormInput>
</div>
Das Problem ist, dass sich das Formularobjekt und auch die Transaktionseigenschaften ändern, wenn ich den Transaktionsnamen ändere. Daher ändern sich auch die Namen in den übergeordneten Daten, da Transaktionseigenschaften reaktiv sind. Was mache ich falsch oder wie kann ich ein Formularobjekt implementieren, dessen Werte bei der Komponentenerstellung mithilfe von Requisitenwerten und ohne Delegaten ausgefüllt werden?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
使用 props 将初始值传递给子组件的状态是很常见的。这意味着您“复制”了本地
data中某个 prop 的值。它可以确保 prop 值免受意外更改的影响： 在 Vue 中阅读更多内容文档这是一个非常简单的示例，展示了上述方法：
/your-child-component-vue/
export default { props: ['initialCounter'], data() { return { // counter only uses this.initialCounter as the initial value; // it is disconnected from future prop updates. counter: this.initialCounter } } }现在，阅读您的示例，我发现您正在尝试更新表单中的某些数据，并且您不想更改初始信息，除非通过按钮或其他内容确认。解决这个问题的流程是：
this.$emit)，以便它了解更改。所以我找到了两个解决方案：
const form = reactive({...props.transaction})或
const form = Object.assign({}, props.transaction)两者都有效，当我更改表单值时，它不会改变道具。