Estoy trabajando en un componente de entrada personalizado que tiene un div principal y una etiqueta. Me gustaría aplicar cualquier clase al div principal, pero también quiero asegurarme de que cualquier otro atributo fallido se aplique al componente de entrada.

Aquí hay una versión simplificada de mi componente.

En App.vue

 <script setup> import { ref } from 'vue' import MyInput from './MyInput.vue' const msg = ref('I only want the outer blue box') </script> <template> <h1>{{ msg }}</h1> <my-input class="blue" aria-foo="foo" aria-bar="bar"/> </template> <style> .blue { padding: 1rem; border: 3px solid blue; } </style>

En MyInput.vue

 <template> <div :class="attrs.class"> <input v-bind="attrs" > </div> </template> <script> export default { inheritAttrs: false, customOptions: {} } </script> <script setup> import { useAttrs, computed } from 'vue' const attrs = useAttrs(); </script>

¿Hay una buena manera de obtener todos los attrs excepto la clase? Intenté hacer una copia de attrs usando un computed pero eso no pareció funcionar.

Esto es lo que probé:

 const inputAttrs = computed(()=>{ let returnObj = {} for (attr in attrs) { if (attr !== 'class') { returnObj[attr] = attrs[attr] } } return returnObj; })

¿Aparentemente no se definió attr en el ciclo for? Básicamente, quiero que la entrada obtenga los atributos aria-foo y aria-bar sin la propiedad class .

Aquí hay un enlace al SFC Playground con el código anterior.