I need to bind the first name to the alt text of each LI item-CodePudding

I need to bind the first name to the alt text of each LI item. Don't understand what's the problem. Can someone please help me? Thank you!

html:

<div id = name> <label for = "firstName">First Name:</label> <input type = "text" id = "firstName" v-model = "firstName"> <br><ol><li v-for = "food in foods" :key = "food.id" :alt = "firstName">{{food.text}}</li></ol></div>

vue.js:

var name = new Vue({el: "#name",data:{firstName: "lee",foods: [{id:0, text:"pizza"}, {id:1, text:"ice cream"}, {id:2, text:"sushi"}})

CodePudding user response：

You can add condition like this on LI to show firstname as alternate text when food.text is not available.

<div id = name> 
    <label for = "firstName">First Name:</label> 
    <input type = "text" id = "firstName" v-model = "firstName"> <br>
    <ol>
        <li v-for = "food in foods" :key = "food.id" >{{food && food.text ? food.text : firstName}}</li>
    </ol>
</div>

CodePudding user response：

alt is usually used as alternative text for images. If you want to show a tooltip for each <li> use title instead:

    <div id="name">
      <label for="firstName">First Name:</label>
      <input type = "text" id = "firstName" v-model = "firstName"><br>
      <ol>
        <li v-for = "food in foods" :key = "food.id" :title = "firstName">
          {{food.text}}
        </li>
      </ol>
    </div>