如何在属性中插入功能？

Question

我正在尝试循环循环 COST_CLASSIFIACY_OPTIONS 数组，并用空格代替下划线，同时将每个字符串的第一个字母大写。我已经完成了一个方法 converttitlecase（str），但似乎不起作用。如何在中正确插入转换totitlecase（str）方法：options （）？

<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>

任何帮助都非常感谢。

Answer 1

从方法的第一个中删除 async 关键字：

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(' ');
        },
    },

创建一个 compulated 属性并使用该方法转换所有选项：

computed: {
  selectOptions() {
    return this.cost_classification_options.map(opt => this.convertToTitleCase(opt))
  },
},

将模板更改为：

<multiselect
  v-model="form.cost_classification"
  :options="selectOptions"
  :multiple="false"
  :taggable="false"
  :tabindex="6"
></multiselect>

Answer 2

而不是让逻辑变得复杂。您可以通过迭代 mounted() 挂钩中的选项数组来简单地实现它。

工作演示：

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/[email protected]/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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>