Vue将输入的firstName绑定到每个li项alt属性失败如何解决

问题排查 #

你代码里一共存在2处问题：

• Vue实例语法存在闭合错误，foods数组缺少右方括号]，整个data对象缺少右花括号}，会直接导致Vue实例初始化失败
• <li>属于普通列表元素，本身没有原生alt属性，alt属性仅适用于图片、热点区域等资源类元素，如果要存储自定义文本，建议使用标准自定义属性data-*格式，当然如果确实要绑定非标准alt属性Vue也支持，但不符合HTML语义规范

修正后代码 #

HTML部分 #

<div id="name">
  <label for="firstName">First Name:</label>
  <input type="text" id="firstName" v-model="firstName">
  <br>
  <ol>
    <!-- 符合语义的自定义属性写法，后续可以通过DOM元素的dataset.alt取值 -->
    <li v-for="food in foods" :key="food.id" :data-alt="firstName">
      {{food.text}}
    </li>
    <!-- 确实需要alt属性的话可以用下方写法，绑定逻辑同样生效 -->
    <!-- <li v-for="food in foods" :key="food.id" :alt="firstName">{{food.text}}</li> -->
  </ol>
</div>

Vue部分 #

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

修正后输入框内的firstName值变化时，所有列表项绑定的属性值会同步更新，完全符合需求。

内容的提问来源于stack exchange，提问作者lee