Vuejs Html tag / attribute in data()

Question

I need to do {{item.icon}} pull as a html data not string but ı don't know how to do that, is there are anyway to do that please help me out

I have this code:

    <div class="box my-5" v-for="(item, index) in items" :key="index" >
        <div class="innerBox">
            <router-link to="/ninethPage">
                <div  class="card Fcard d-flex  flex-row justify-content-center align-items-center" style="padding: 1rem 2rem !important">
                    <span v-html="icon"> </span>
                    <p>{{item.title}}</p>
                </div>
            </router-link>
            <router-view></router-view>
        </div>
    </div>
</div>


export default {
        el: '#app',
        data() {
            return {
                items: [
                    {title: 'Android', icon: <i class="fab fa-android mx-3 img-fluid" style="font-size: 1.5rem;" ></i>},
                    {title: 'IOS', icon: <i class="fab fa-apple mx-3 img-fluid" style="font-size: 1.5rem;" ></i>}
                ]
            }
        },
        components:{
            Header
        }
    }
`

It wont work man <div class="card Fcard d-flex flex-row justify-content-center align-items-center" style="padding: 1rem 2rem !important"> {{item.title}} </div> return { items: [ {title: 'Android', icon: ''}, {title: 'IOS', icon: '' } ] } — Kerem Unce
– Kerem Unce, Commented Dec 9, 2021 at 9:53
All icons from items should be in string format: icon: "my-icon" — Vasile Radeanu
– Vasile Radeanu, Commented Dec 9, 2021 at 10:34
I already do that, no errors but icon doesnt show items: [ {title: 'Android', icon: ''}, {title: 'IOS', icon: '' } ] } — Kerem Unce
– Kerem Unce, Commented Dec 9, 2021 at 12:35
Inspect elements in dev tools, check if ... exists in span — Vasile Radeanu
– Vasile Radeanu, Commented Dec 9, 2021 at 12:39

Estus Flask · Accepted Answer · 2021-12-09 13:30:34Z

1

icon: <i class=... is JSX syntax that creates an element and needs to be used with render function instead of a template. It should be a string, icon: '<i class=...'.

There is no icon property, it should be .

It's impractical to specify the whole icon element. If only  classes differ, it can be icon: 'fa-android', and be used with:

<i class="class="fab mx-3 img-fluid" style="font-size: 1.5rem" :class="item.icon"/>

answered Dec 9, 2021 at 13:30

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs Html tag / attribute in data()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related