I need assistance looping through the array cost_classification_options to replace underscores with spaces and capitalize the first letter of each string. I created a method called convertToTitleCase(str) for this purpose, but it doesn't seem to be working correctly. How can I properly implement the convertToTitleCase(str) method in the :options component of Vue-multiselect ()?
<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>Your assistance is greatly appreciated.