vuejs/vue

Vue-specific attributes are invalid html

Closed this issue · 1 comments

sebbayer commented

The attributes true-value and false-value on <input> fields are vue-specific according to the documentation:

https://vuejs.org/guide/essentials/forms#checkbox-1

Here's a playground link

https://play.vuejs.org/#eNp9UcFOwzAM/ZUol4K0dRLjNG1IgHaAAyDgGAmVzi0ZaRIlTtlU9d9xUnXbYdrNee/Zfi/u+L21eRuAL/jSl05aZB4w2DuhZWONQ9YxBxXrWeVMwzKSZkILXRrtkaGpawVsFSVX2R58di30cjYMohH0QGisKhDoxZZS24BUMNxbWAle/kD5+212gkewnTZmA4rwYe6AogswbQsVYgOtGNCqUP4IayM4m8UVrOtGV30fvZzs5xOOnoxXss633mjK3MUW8mEaKxW4V4uSggm+YImJXKGU+XtOWLQyGfHk/Qy+9RRnQcWbAw+upRgHDgtXAw70+uMFdlQfSAofYugL5Dt4o0L0OMgegt6Q7RNdcvuULid1/enXOwTtx1DRaFT2SS84XfPxQvSj3Xl+m/qE7ukXv1pwcSZ9IBH5zZz3/7phwkk=

However, the markup rendered is invalid because of those attributes.

Go to https://validator.w3.org/nu/#textarea

And validate this string

<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
</head>
<body>
<input type="checkbox" true-value="yes" false-value="no">
</body>
</html>

I dont't know if more internal attributes besides true-value and false-value exist.

Could this be fixed by using data attributes instead?

sebbayer commented

Sorry, I meant to open this in the vue 3 repo. Closing this issue in favor of vuejs/core#13010