Question

我已经尝试寻找一种解决方案，但是还没有找到。我有一个Vuetify v-select下拉菜单，用于开始时间，另一个用于结束时间。

一旦用户选择了一个时间，我希望它显示一个placeholder-在“开始时间” 和“结束时间” 在小选择。（因此用户应该知道它是什么字段）设置placeholder属性似乎没有帮助。

HTML

<!--placeholder not working on v-select>-->
    <v-select
      :items="getTimes"
      label="Start Time"
      prepend-icon="access_time"
      solo
      placeholder="Start Time"
    ></v-select>

    <v-select
      :items="getTimes"
      label="End Time"
      solo
      placeholder="End Time"
    ></v-select>
    </v-layout> `

JS

computed:
{
  getTimes()
  {
    this.hour=0;
    this.min=0;
    this.twelveHourTime=0;

    for(this.hour=6; this.hour<=22; this.hour++)
    {
         for(this.min=0;this.min<=45;this.min+=15)
        {

           //move to 12 hr time and add am's and pm's

            if (this.hour>12)
            {
               this.twelveHourTime = this.hour-12;
               this.setPeriod="pm";
            }
          else
          {
           this.twelveHourTime = this.hour;
              if(this.hour==12)
              {
                this.setPeriod = "pm";
              }
              else
              {
                this.setPeriod = "am";
              }

          }

             //add the time options to times array

            if (this.min==0)
            {
               this.times.push(this.twelveHourTime + ":00 " + this.setPeriod);
            }
            else
            {
             this.times.push(this.twelveHourTime + ":" + this.min + " " + this.setPeriod );
            }
        }
    }


     return this.times;
  },

Answer 1

当然，placeholder道具不会起作用，因为您具有 solo 作为道具。删除它或将其更改为其他样式，如框或大纲，它将显示。

另一点，如果您的getTimes()函数具有预加载的数据，则它属于methods而不是computed钩子。只需将数据属性times（数组）传递到:items中的<v-select>属性即可。

建议：您也可以将<v-select>更改为<v-autocomplete>，以获得更好的用户体验。对于第一个，您必须拖动滚动条，而滚动条在输入时会自动完成。

您的代码可能看起来像这样

Codepen

https://codepen.io/anon/pen/JBxMzW?&editors=101

HTML

 <v-layout>

    <v-select
      :items="times"
      label="Start Time"
      prepend-icon="access_time"
      box
      placeholder="Start Time"
   ></v-select>
   <v-select
     :items="times"
     label="End Time"
     box
     placeholder="End Time"
   ></v-select>
</v-layout>

JS

 data() {
    return {
        hour: 0,
        min: 0,
        twelveHourTime: 0,
        setPeriod: '',
        times: []
    }
},

mounted() {
  this.getTimes()
},

methods:{
  getTimes()
    {
        this.hour=0;
        this.min=0;
        this.twelveHourTime=0;

        for(this.hour=6; this.hour<=22; this.hour++)
        {
            for(this.min=0;this.min<=45;this.min+=15)
            {

            //move to 12 hr time and add am's and pm's

                if (this.hour>12)
                {
                this.twelveHourTime = this.hour-12;
                this.setPeriod="pm";
                }
            else
            {
            this.twelveHourTime = this.hour;
                if(this.hour==12)
                {
                    this.setPeriod = "pm";
                }
                else
                {
                    this.setPeriod = "am";
                }

            }
                //add the time options to times array

                if (this.min==0)
                {
                this.times.push(this.twelveHourTime + ":00 " + this.setPeriod);
                }
                else
                {
                this.times.push(this.twelveHourTime + ":" + this.min + " " + this.setPeriod );
                }
            }
        }
        return this.times;
    }
}

Vuetify <v-select>标签中的占位符不起作用

1 个答案: