i want to get username from back-end in vuejs

Question

here whare i pass sender id to the server, and get correct name

nameOfSender(from, to) {
      if (from._id == localStorage.getItem('userID')) {
      return  axios
        .post(
          "http://localhost:3000/get-user-name",
          { to },
          {
            headers: {
              authorization: localStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          console.log('Chat USer', res.data.name)
          return {
            from: 'you',
            to: res.data.name
        }
        });

and here where i call the method but does not show the name

<v-list-item-title v-text="nameOfSender(chat.from, chat.to).from"></v-list-item-title>
<v-list-item-title v-text="nameOfSender(chat.from, chat.to).to"></v-list-item-title>

Answer 1

As far as I know, axios returns a Promise. So this kind of access nameOfSender(chat.from, chat.to).from" should not be possible (since it is an asynchronous operation).

A possible solution would be:

  data: () => ({
    nameOfSender: {
      from: undefined,
      to: undefined,
    },
  }),
  // ...
  methods: {
    getNameOfSender(from, to) {
      if (from._id == localStorage.getItem('userID')) {
        axios.post("http://localhost:3000/get-user-name",
          { to },
          {
            headers: {
              authorization: localStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          console.log('Chat USer', res.data.name)
          this.nameOfSender = {
            from: 'you',
            to: res.data.name
          }
        });
        
      }
    }
  },
  mounted() {
    this.getNameOfSender(this.chat.from, this.chat.to);
  }

And then you would be able to access the data by:

<v-list-item-title v-text="nameOfSender.from"></v-list-item-title>
<v-list-item-title v-text="nameOfSender.to"></v-list-item-title>