Vue.jsコンポーネントhtml入力パターンの検証が正しく動作しない

Question

私は、入力HTML属性 'pattern'を使用するhtmlフォームを作成しようとしていますが、Vue.jsコンポーネントを使用すると非常に奇妙な動作をします。ここに実証するためのフィドルです。

Vue.component('test', { 
template:`<input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}" 
title="Must contain at least one number and one uppercase and lowercase letter, and be between 8 and 16 characters."/>` 
}) 

jsfiddle Demo

パターン正規表現here (regex101 example)の内訳。

私の人生のために、なぜ正常なバージョンが正しく検証されるのか理解できませんが、Vueバージョンは正しくありません。

Answer 1

Vue入力に\dパターンのバックスラッシュがありません。単一の\が補間されるので、それを倍にする必要があります。

Escaping in template literals

バックスラッシュは、テンプレートリテラルの内部に逃げるために使用されます。