實例上未定義 Vue js 屬性或方法“theSport”

Question

我正在 VueJs 中處理一個簡單的表單，但我不完全理解為什么我的代碼顯示錯誤。

“[Vue 警告]：屬性或方法“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>

Answer 1

您需要使用 v-for="theSport in sportPlayed" 而不是 v-bind:for="theSport in sportPlayed" 來循環遍歷 sportPlayed 數組。

檢查列表渲染文檔： https ://v2.vuejs.org/v2/guide/list.html