Vue.js Vue js属性或方法“；“运动”；未在实例上定义

我正在VueJs中处理一个简单的表单，我不完全理解为什么我的代码显示错误

[Vue warn]：属性或方法“theSport”未在实例上定义，但在呈现期间被引用

我已经在google和codepen上搜索过了（甚至在我的表单上用那些有用的东西建模），但我仍然遇到同样的问题。有人能告诉我哪里出了问题吗

<template>
    <form>
        <select name="" id="sportPlayed" v-model="selected">
            <option v-bind:value="theSport.sport" v-bind:for="theSport in sportPlayed">{{ theSport.sport }}</option>
        </select>
        <br>
    </form>
</template>

<script>
export default {
    name: "FullName",
    data:() => {
        return {
            selected: "Football",
            sportPlayed: [
                {sport: "Football"},
                {sport: "Basketball"},
                {sport: "Baseball"},
                {sport: "Soocer"}
            ]
        }
    }
}
</script>

{{theSport.sport}


导出默认值{
姓名：“全名”，
数据：（）=>{
返回{
精选：“足球”，
运动游戏：[
{体育：“足球”}，
{体育：“篮球”}，
{体育：“棒球”}，
{体育：“Soocer”}
]
}
}
}

您需要使用v-for=“sportPlayed中的运动”而不是v-bind:for=“sportPlayed中的运动”在sportPlayed数组中循环

---

查看列表渲染文档：

更改

v-bind:for

到

v-for

@skilltle在进行更改后，我注意到它在后台工作，看起来这实际上是一个es lint错误，我将对此做更多的研究，但感谢您的回答！