Блог

Я создал компонент формы выбора:

 lt;templategt;  lt;div class="col"gt;  lt;div class="row mb-4"gt;  lt;label class="col-sm-4 col-form-label col-form-label-sm"gt;{{ label }}lt;/labelgt;  lt;div class="col-sm-8"gt;  lt;select  class="form-select form-select-sm"  :class="{'is-invalid': error}"  :disabled="disabled"  :value="modelValue"  @change="updateSelect"  gt;  lt;option  v-for="(option, index) in options"  :value="option.id ? option.id : (option.value ? option.value : option)"  :key="option.id ? option.id : index"  gt;  {{ option.name ? option.name : option }}  lt;/optiongt;  lt;/selectgt;  lt;div class="invalid-feedback" v-if="error"gt; {{ error }}lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/templategt;  lt;scriptgt;  export default {  name: "SelectForm",  props: {  label: {  type: String,  default: "",  },  modelValue: {  type: [String, Number, Boolean],  default: "",  },  error: {  type: String,  default: ""  },  disabled: {  type: Boolean,  default: false  },  options: {  type: Object  }  },  setup(props, { emit }) {  const updateSelect = (event) =gt; {  emit("update:modelValue", event.target.value)  }   return {  updateSelect  }  } } lt;/scriptgt;  lt;style scopedgt;  lt;/stylegt;   

Варианты могут быть для ex:

 ['Test 1', 'Test 2'] [{id: 1, name: 'Test 1'}] [{value: 'test1', name: 'Test 1'}]  

Итак, в основном компоненте у меня есть это:

 lt;select-form label="Status" :options="userStatuses" v-model="isActive"/gt;  

где объект userStatuses-это:

 const userStatuses = ref([  {name: 'Active', value: true},  {name: 'Inactive', value: false} ])  

Проблема в том, что при выборе значения «Активный» он устанавливает модель isActive как «истинную» (в виде строки — и мне нужно, чтобы она была логической) и для неактивного объекта = gt; (это то, что говорится в инструментах разработки Vue)

Я предполагаю, что проблема заключается в возврате значения модели

 emit("update:modelValue", event.target.value)  

Я не уверен, правильно ли я это сделал.

Кто-нибудь знает, как это решить ?

Я внес некоторые изменения в функцию updateSelect и привел значение, если оно логическое или числовое … и установите это значение при обновлении:

 const updateSelect = (event) =gt; {  let value = event.target.value;  if(value === 'true') { value = true }  if(value === 'false') { value = false }  if(!isNaN(parseInt(value))) { value = parseInt(value) }  emit("update:modelValue", value) }  

Эта строка, по-видимому, приводит к тому, что «Неактивный» возвращает объект, а «Активный» возвращает строку:

 :value="option.id ? option.id : (option.value ? option.value : option)"  

Поскольку {name: 'Inactive', value: false} у него нет id и есть ложь value , он установит весь объект опции в качестве значения опции.

Вы можете переписать его как:

 :value="typeof(option) === 'string' ? option : option.id || option.value"  

Таким образом, в этом случае вы всегда получите либо «истину», либо «ложь». Тем не менее, я считаю, что event.target.value для выбора будет возвращена строка в любом случае, поэтому вам также нужно будет изменить это:

 emit("update:modelValue", event.target.value)  

Для

 emit("update:modelValue", event.target.value === "true")