Question

我有遍历一个非常简单的对象并在选择框中将对象元素显示为选项的代码。在查看页面元素时，代码看起来像在工作，但是无论出于何种原因，下拉框本身都不会显示在浏览器中。

当我检查页面时，脚本在元素视图中显示了正确的结果：https://imgur.com/a/tstJt8x

我还有其他项目使用相同的逻辑而没有问题。我在此项目中使用了实现CSS，但是无法确认问题出在哪里。创建具有相同循环逻辑的卡可以正常工作。在“ p”标签中输出结果还可以与循环逻辑一起使用。我只是不能使其在'select'+'option'标签中起作用。

<template>
    <div class="add-catch container">
        <div class="formbox">
            <select size="1" v-model="selected">
                <option v-for="person in people" v-bind:key="person.key">{{person.name}} </option>
            </select>
        </div>
    </div>
</template>
<script>

export default {
    name: 'AddCatch',
    data(){
        return{
            selected: null,
            people:[
                {name: "billy", key:"1234"},
                {name: "steve", key:"5367"},
            ]
        }
    },
    methods: {
    }
}
</script>
<style>


</style>

选择屏幕上不可见的框

0 个答案: