VueJS - bind an object of attributes

Issue

in Vue js let's suppose we have this code:

<script setup>
import { Link } from "@inertiajs/vue3";
import { reactive } from 'vue'
</script>

<template>
        <div data-bs-toggle="collapse"
             data-bs-target="#Dashboard"
             aria-expanded="false"
             aria-controls="Dashboard"
        >       
           <i class="fa-solid fa-chart-line fa-lg lh-1"></i> 
        </div>
</template>

let's suppose we have tons of divs like this one and with the same attributes, then instead of typing same attributes again and again, can't we just extract attributes to an object and then binding them, like this:

<script setup>
import { Link } from "@inertiajs/vue3";
import { reactive } from 'vue'

const Object = reactive({
  data-bs-toggle:"collapse"
  data-bs-target:"#Dashboard"
  aria-expanded=:false
  aria-controls=:"Dashboard"
});
</script>
<template>
        <div :attr="Object" >       
           <i class="fa-solid fa-chart-line fa-lg lh-1"></i> 
        </div>
</template>

can we do something like this ?

Solution

Use v-bind:
https://vuejs.org/guide/components/props.html#binding-multiple-properties-using-an-object

<div v-bind="Object" > 

Answered By - Alexander Nenashev