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

【问题标题】：Looping time values in a select element in VueVue中选择元素中的循环时间值
【发布时间】：2020-10-14 08:48:31
【问题描述】：

所以我有这个我用 PHP 制作的选择框，它是从 9:00 到 19:00 的时间下拉列表，它是在 For 循环中生成的。我用来将选定的时间值传递给数据库。

但是，我已经尝试在 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 实践”或如何将其绑定到我的选择元素。

提前致谢

【问题讨论】：

我仍然不确定你要做什么？
我正在尝试为 Vue 中从 9:00 到 19:00 生成时间的 select-dropdown 创建一个 for 循环。

标签： javascript vue.js vuejs2

【解决方案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>

【讨论】：

遇到各种错误。第一个unexpected token at data: () 如果我删除它，我会得到Raw expression: :value="${i+8}:00"
如果解决方案有效，请将其标记为已接受的答案。谢谢！
我仍然在data: () 收到错误，但是当我删除它时，我确实可以工作。但是 1 个小问题。我如何从选择中发布值？我需要在选择元素上使用 V-model 吗？ PS：我用的是axios
应该是 data() 而不是 data:()
您使用的后端技术是什么？

【解决方案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>

【讨论】：