Estoy tratando de recorrer la matriz cost_classification_options y reemplazar los guiones bajos con espacios, al mismo tiempo, poner en mayúscula la primera letra de cada cadena. Hice un método convertToTitleCase(str) , para hacer esto, pero parece que no funciona. ¿Cómo puedo insertar el método convertToTitleCase (str) correctamente en :options ( https://vue-multiselect.js.org/ )?
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style> <script> import Form from 'vform' import Multiselect from 'vue-multiselect' export default { components: { Multiselect }, data: () => ({ errors: {}, form: new Form({ designation_id: [], position_id: [], cost_classification: [] }), designation_options: [], position_options: [], cost_classification_options: ['direct_labor', 'indirect_labor', 'general_and_admin'] }), methods: { async convertToTitleCase(str) { const arr = str.split('_'); const result = []; for (const word of arr) { result.push(word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()); } return result.join(' '); }, }, created: function() { this.getDesignationNames(); this.getPositionNames(); }, } </script> <multiselect v-model="form.cost_classification" :options="cost_classification_options" :multiple="false" :taggable="false" :tabindex="6" ></multiselect>Cualquier ayuda es muy apreciada.
Elimine la palabra clave async del primero del método:
methods: { convertToTitleCase(str) { const arr = str.split('_'); const result = []; for (const word of arr) { result.push(word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()); } return result.join(' '); }, }, Cree una propiedad computed y convierta todas las opciones con el método:
computed: { selectOptions() { return this.cost_classification_options.map(opt => this.convertToTitleCase(opt)) }, },Cambia la plantilla a esto:
<multiselect v-model="form.cost_classification" :options="selectOptions" :multiple="false" :taggable="false" :tabindex="6" ></multiselect>En lugar de hacer la lógica compleja. Simplemente puede lograrlo iterando la matriz de opciones en el enlace de mount mounted() .
Demostración de trabajo:
new Vue({ components: { Multiselect: window.VueMultiselect.default }, data: { cost_classification: [], cost_classification_options: ['direct_labor', 'indirect_labor', 'general_and_admin'] }, mounted() { this.cost_classification_options = this.cost_classification_options.map(opt => { const arr = opt.split('_'); let str = ''; for (const word of arr) { str += word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() + ' '; } return str.trim(); }) } }).$mount('#app') <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.0.3/dist/vue-multiselect.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.0.3/dist/vue-multiselect.min.css"/> <div id="app"> <multiselect v-model="cost_classification" :options="cost_classification_options" :multiple="false" > </multiselect> <pre>{{ cost_classification }}</pre> </div>