nafeeur10's avatar

How to get First Letter of First & Last name

Suppose, My Name is "Aerofoil Todo Kite" I want AK

I got a code from Stackoverflow. I hope it will work. But my question is, I am printing data from Array of Objects with v-for loop.

How do I pass the Name to compute that?

I think, Computed Property don't accept Parameter.

Then what will be the process??

Method can do. But It is calling for many times!!!

data:

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

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

Code of Mine:

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

Here is the problem: {{ nameOfCompany(scope.row.customer) }}

This function is calling for many times!!!!

0 likes
6 replies
EdgarPsda's avatar

Hello @nafeeur10 , you can try this code, I hope works for you:

<p v-for="(fullName, index) in arr.fullNames"
      :key="index"
 >{{ initials(fullName)}}</p>

initials(fullName) {
      // Create a array from fullName
      let arrName = fullName.split(" ");

      // Select the first letter of the name
      let iniName = fullName.charAt(0);

      // Select the first letter of the lastname
      let iniLname = arrName[arrName.length - 1].charAt(0);

      // Return the initials
      return iniName + iniLname;
    }
artcore's avatar
const initialsFromString = (string) =>
{
  if(typeof string !== 'string') return;
  
  const strings = string.split(' ');
  
  const first = unshift(strings).charAt(0).toUppercase();
  const last = strings.pop().charAt(0).toUppercase();
  
  return `${first} ${last}`;
}

export default initialsFromString;

I have things like these in helper files to import where needed. Above is untested but would be my first go at it;

nafeeur10's avatar

@all,

My Question is not how to calculate it. I know how to calculate it. But my question is, in Vue.JS how will I pass the name to Compute it?

MaverickChan's avatar

i strongly advise you do this in php backend , in model , you can add an attribute then in vue you can retrieve it , it is much easier

1 like

Please or to participate in this conversation.