テキストフィールドでVue3 + TypeScript v-modelを使用するにはどうすればよいですか? 「エラー: 割り当てターゲットが無効です」

Question

完全に間違っています:

リーリー

これは App.vue:

リーリー

これはエラーの完全な再現です:

• https://stackblitz.com/edit/vue3-vite-typescript-starter-jkcbyx?file=src/App.vue

---

ご協力ありがとうございます<3

この質問はかなり混乱します。

Answer 1

ダブル バインディング (v-model) をオプションのリンク (np?.description) とともに使用することはできません。ダブルバインディングとはゲッターとセッターを意味します。 np が false の場合、セッターに何を設定させたいですか?これを v-if でラップしていることはわかっていますが、オプションのリンケージは、ターゲット オブジェクト構造が未定義である可能性があること、つまり無効な代入ターゲットであることを v-model に伝えます。

1 つの方法は、計算された description を作成し、np の現在の値 > で以下が許可される場合に np.description を設定する方法を指定することです。 リーリー

ここで仕組みを確認してください:

https://stackblitz.com/edit/vue3-vite-typescript-starter-wrvbqw?file=src/App.vue

---

上記は非常に一般的な解決策です (実際に

本当に v-model のオプションのリンケージを使用する必要がある場合)。 あなたの場合、より単純な代替策（おそらく v-if="np"
で をラップしているため）、 v -model の Optional linkage を使用しないでください。 ＃＃＃ 根：＃＃＃ v-model.trim="np?.description" を v-model.trim="np.description"
に置き換えます。 ＃＃＃それが動作します。