Как получить первую букву имени и фамилии: Vue. js?

Question

Предположим, меня зовут "Aerofoil Todo Kite" Я хочу AK

Я получил код от Stackoverflow. Я надеюсь, что это будет работать. Но мой вопрос в том, что я печатаю данные из Array of Objects с v-for l oop.

Как мне передать имя для вычисления этого?

Я думаю, Computed Property don Не принимаем параметр.

Тогда каков будет процесс ??

Метод может сделать. Но он звонит много раз !!!

данные:

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

Вы можете написать компонент Customer, чтобы вычислить имя компании только один раз:

Для этого требуется имя, а в данных вычисляется связанное имя компании.

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>

Answer 2

Вы можете использовать filters или computed.

Фильтры : Vue . js позволяет определить фильтры, которые можно использовать для применения обычного форматирования текста. Фильтры можно использовать в двух местах: интерполяции усов и выражений v-bind (последние поддерживаются в 2.1.0+). Фильтры должны быть добавлены в конец выражения JavaScript, обозначенного символом «pipe»: do c

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>