将枚举值从模型传递到组件

Question

我试图从枚举模型中获取价值，但我不知道怎么做：/ 我花了很多时间在这上面，但我仍然无法解决这个问题。

我的型号代码：

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const taskSchema = new Schema ({
  title: {
    type: String,
    required: true,
  },
  priority: {
    type: String,
    enum: ['low', 'medium', 'height'],
    default: 'low',
  },
  progress: {
    type: String,
    enum: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
    default: '0%',
  },
});

module.exports = mongoose.model('Task', taskSchema);

我的组件：

<select
 :value="task.priority">
 <option :value="task.priority" disabled>{{task.priority}}</option>
 <option value="low">Low</option>
 <option value="medium">Medium</option>
 <option value="height">Height</option>
</select>

Script:
export default {
  props: {
    task: {
      type: Object,
      required: true,
      priority: ['low', 'medium', 'height']
    },
  }
}

我尝试了类似的方法，但我只想在一个 option 中选择值。例如，我在“项目/任务或其他”中有“中等”值，然后我打开这个要编辑，所以我会有重复的“中等”值，因为在创建过程中我选择了“中等”。

我尝试对任务使用 v-for 指令，但没有得到任何结果。

Answer 1

您不能设置:value="task.priority"，因为task.priority 是一个数组。您应该选择其中一个值（低、中或高）。以下是我使用 select 的方式：

<select name="name" class="form-control" v-model="field">
    <option v-for="option in param.options" :value="option.value">{{$t(option.option)}}</option>
</select>

如您所见，我将选择的值存储到 field 数据属性中。您还可以查看有关使用 select https://vuejs.org/v2/guide/forms.html#Select 的文档。