在 Vue 的选择元素中循环时间值

Question

所以我有这个我用 PHP 制作的选择框，它是在 For 循环中生成的从 9:00 到 19:00 的时间下拉列表。我用它来将选定的时间值传递给数据库。但是，我已经尝试在 Vue 中执行此操作 3-4 天了，但一直无法找到任何有助于解决此特定问题的方法。这是我到目前为止所拥有的：<template><v-col cols="12">    <v-card>        <v-row>            <v-col>                <h3>Pick your time.</h3>                <select name="option">                    <option value="Current Time">Current Time</option>                    <option v-bind:key="i.id" v-for="i in 10" :value="i">{{ i }}</option>                            </select></v-col>        </v-row>    </v-card>    </v-col></template><script type="text/javascript">    methods: {        timeInt() {            for(i = 900; i<= 1900; i+=100){                return i;            }        }    }</script>方法的最后一部分是我尝试在脚本中编写循环。我不知道这是否是正确的“Vue 实践”或如何将其绑定到我的选择元素。

Answer 1

<v-col cols="12">

    <v-card>

        <v-row>

            <v-col>

                <h3>Pick your time.</h3>

                <select name="option" v-model="form.time">

                    <option value="Current Time">Current Time</option>

                    <option v-bind:key="i.id" v-for="i in 11" :value="(i+8) + ':00'"> {{ `${i+8}:00` }}</option>

                </select></v-col>

        </v-row>

    </v-card>

</v-col>

<script>

    data(){

        return {

            form:{

               time:null

            }

        }

    },

</script>

Answer 2

<template>

<div>

    <select v-model="selected" @change="changeSelected">

        <option value="Current Time">Current Time</option>

        <option :key="index" v-for="(i,index) in 11" :value="(i+8 >=10 ? String(i+8) : '0'+(i+8)) +':00' ">{{ (i+8 >=10 ? i+8 : '0'+(i+8) )+':00' }}</option>

    </select>

</div>

</template>

<script>

export default {

data(){

      return{

        selected: 'Current Time'

    }

 },

 methods :{

     changeSelected(){

            console.log(this.selected)

     }

 }

}

</script>