したがって、行のあるテーブルがあり、その行には編集可能である必要のある注釈フィールドがあります。
データベースからフェッチされたオブジェクトは、配列に格納される前にフリーズされます。これは、多くの行を持つデータテーブルをフェッチする多くのページで見られたメモリの肥大化を減らすために行われた決定でした。
例
for (var i = 0; i < response.data.length; i++) { Object.freeze(response.data[i]); }
this.recordProductsList = this.recordProductsList.concat(response.data);
フィールドを変更しようとすると、「エラー：読み取り専用フィールドを変更できません」というエラーが表示されます。
そして、私はそのオブジェクトを凍結したので、これを理解しています！
しかし、次に要素をv-modelから：valueに変更すると、エラーなしで正常に機能しているように見え、正常に保存され、正常にフェッチされ、正常に更新されているように見えます。
どうして？ここでの違いは何ですか？私が理解していない将来の何かについて心配する必要がありますか？
<td>
<v-text-field v-model="props.item.productAnnotationText" @input='inputAnnotation($event, props.item.id)' :disabled="!editMode" color="primary">
</v-text-field>
</td>
to
<td>
<v-text-field :value="props.item.productAnnotationText" @input='inputAnnotation($event, props.item.id)' :disabled="!editMode" color="primary">
</v-text-field>
</td>
あなたのv-model：
<v-text-field
v-model="props.item.productAnnotationText"
>
の省略形です：
<v-text-field
:value="props.item.productAnnotationText"
@input="props.item.productAnnotationText = $event"
>
ドキュメント：https：//vuejs.org/v2/guide/components.html#Using-v-model-on-Components
props.item観察したように、オブジェクトがフリーズすると、イベントリスナーは失敗します。
使用するように変更すると、:valueそのinputリスナーは取得されないため、オブジェクトの変更は試行されません。
ただし、それでもinputイベントの発生は停止しません。あなたはあなた自身のリスナーを持っていますinputAnnotation、そしてそれはうまく呼ばれるべきです。props.itemどちらのプロパティも変更することはできませんが、それは必要なものではないようです。
理解しておくべき重要なことは、オブジェクトprops.itemが古くなり、古い値がまだ含まれていることです。それはすぐには明らかにならないかもしれませんが、その値が後で使用されると問題になる可能性があります。
あなたが言ったことに基づいて、あなたはデータをサーバーに保存してから更新されたデータを再フェッチするように聞こえます。その場合、元のフリーズされたオブジェクトprops.itemを破棄し、同じ行を表すまったく新しいオブジェクトに置き換える可能性があります。元のオブジェクトへの参照に固執しているものが他にない限り、すべてのデータが最新であることを意味します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加