如何获取名字和姓氏的首字母：Vue.js？

Question

假设我的名字叫“ Aerofoil Todo Kite”，我想要AK

我从Stackoverflow得到了一个代码。我希望它能起作用。但是我的问题是，我正在使用Array of Objects循环从v-for打印数据。

如何传递名称以进行计算？

我认为，计算属性不接受参数。

那将是什么过程？

方法可以做到。但是它呼唤了很多次！！！

数据：

tableData: [
  { customer: 'EE Fashion'}, 
  { customer: 'Tom Hangs Ron'}
}]

methods: {
 nameOfCompany(fullName) {
     console.log(fullName);
     return "HL";
 }
}

矿井代码：

<template slot-scope="scope">
    <p style="margin-top: 5px;"><b>{{ nameOfCompany(scope.row.customer) }}</b></p>
 </template>

这是问题所在：

{{ nameOfCompany(scope.row.customer) }}

此函数调用了很多次！!!!

这样做的方法是什么？

Answer 1

您可以使用 filters 或 computed 。

过滤器 ：Vue.js允许您定义可用于应用常见文本格式的过滤器。过滤器可在两个地方使用：小胡子 插值和v-bind表达式（后者在 2.1.0+）。过滤器应附加到JavaScript表达式的末尾，并用“竖线”符号表示：doc

new Vue({
  el: "#app",
  
  data: {
    tableData: [
      { customer: 'EE Fashion', company_name: "FOO BAR" }, 
      { customer: 'Tom Hangs Ron', company_name: "BAZ FOO BAR"},
      { customer: 'Jerry', company_name: "Lorem Ipsum Dorsum Zaren" }
    ],
  },
  
  filters: {
   short_hand (company_name) {
    // You can put your logic here...
    let words = company_name.split(" ")
    let short_hand = words[0][0] + words[words.length-1][0]
    return short_hand // <-- The return value as Per logic
   }
  },
  
  computed: {
   getTableData () {
    return this.tableData.map(data => {
      let words = data.company_name.split(" ")
      let short_hand = words[0][0] + words[words.length-1][0]
      return { short_hand, ...data }
    })
   }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  USING FILTER: <br>
  <div
    v-for="(data, i) in tableData"
    :key="'using-filter-'+i"
  >
    {{ data.company_name | short_hand }}
  </div>
  
  <hr> USING COMPUTED: <br>
  <div
    v-for="(data, i) in getTableData"
    :key="'using-computed-'+i"
  >
    {{ data.short_hand }}
  </div>
  
</div>

Answer 2

您可以编写一个Customer组件，因此只计算一次公司名称：

它需要一个名称，并在数据中计算关联的companyName。

const mytable = {
  props: ['rows'],
  template: `
    <table>
      <tr v-for="row in rows">
        <slot :row="row"></slot> 
      </tr>
    </table>
  `
}

const mycustomer = {
  props: ['name'],
  data () {
    return {
      companyName: this.name.split(' ').map(x => x[0].toUpperCase()).join('')
    }
  },
  template: `
  <td>{{ name }} - <abbr>{{ companyName }}</abbr></td>
  `
}

let vm = new Vue({
  el:'#el',
  components: { mytable, mycustomer },
  template: `
    <mytable :rows="['grod zi', 'tu rok']">
      <template v-slot:default="{ row: user }">
        <mycustomer :name="user"/>
      </template>
    </mytable>
  `
});

abbr {
color: blue;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="el"></div>