Vuejs Html tag / attribute in data()-CodePudding

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  v-for="(item, index) in items" :key="index" >
        <div >
            <router-link to="/ninethPage">
                <div   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  style="font-size: 1.5rem;" ></i>},
                    {title: 'IOS', icon: <i  style="font-size: 1.5rem;" ></i>}
                ]
            }
        },
        components:{
            Header
        }
    }
`

CodePudding user response：

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 <span v-html="item.icon">.

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

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