如何在属性中插入函数？

Question

我正在尝试遍历cost_classification_options数组并将下划线替换为空格，同时将每个字符串的第一个字母大写。我已经用方法 convertToTitleCase(str) 来做到这一点，但似乎不起作用。如何在 :options (https://vue-multiselect.js.org/) 中正确插入 convertToTitleCase(str) 方法？

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

创建一个 computed 属性并使用以下方法转换所有选项：

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

如何在属性中插入函数？

How to insert a function in attributes?

javascript

string

loops

single-page-application

vue.js