Currently, I am developing a customized input component with a parent div and a label. My goal is to add classes to the parent div while ensuring that any additional attributes are applied to the input component as well.
Let me present you with a simplified version of my component:
In 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>
In 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>
Is there a way to extract all attributes from attrs except for the class? I attempted to create a copy of attrs using a computed function, but it did not work as expected.
This was my attempt:
const inputAttrs = computed(()=>{
let returnObj = {}
for (attr in attrs) {
if (att !== 'class') {
returnObj[attr] = attrs[attr]
}
}
return returnObj;
})
It seems that attr was undefined in the for loop. In essence, I aim for the input to receive the aria-foo and aria-bar attributes excluding the class property.
For more detailed examples and information, please refer to this SFC Playground link.