テキストフィールドで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"
で </code> をラップしているため）、 v -model の <code> Optional linkage を使用しないでください。 ＃＃＃ 根：＃＃＃ </code>v-model.trim="np?.description"<code> を </code>v-model.trim="np.description"<br /> に置き換えます。 <code> ＃＃＃それが動作します。 </code></p><span class="detail_answer2" style="float: left" fid="257815"><div class="btn wenda-second-btn" name="P粉729436537" fid="257815">返事</div></span><i class="layui-icon layui-icon-praise wenda-praise-btn"><span>0</span></i></div></li><div class='more'></div></div><div class='discuss-submit bg-white'><li class='info layui-clear'><span class='f-left' id='discuss-submit-close'>キャンセル</span><span class='f-left wenda-reply-text'>返事</span></li><li class='layui-clear'><textarea type='text' rows="6" placeholder="レビューの内容を入力してください" class="wenda-reply-content-text">