[Vuejs]-How to use data to set other data in Vue.js

Use computed.

Insert below code under data.

computed: {
    FullName() {
         return this.FirstName + this.LastName;
    },
}

You can use this.FullName inside the component.

Welcome to SO!

To get derived data, Vue has feature called computed properties

data: () => ({
  FirstName: Mark, 
  LastName: Zuckerberg,
}),
computed: () => {
  FullName() {
    return this.FirstName + this.LastName
  }
}

Moreover computed properties are cached, so it will only be recomputed when the associated data are changes.

Hope this helps.

You could achieve this using computed properties.

Something like:

new Vue({
  el: "#addr",
  template: `<div class = templateField>
      <h1>Hello {{ firstName }}!</h1>
      <p>Hello {{ lastName }}!</p>
      <p>{{fullName}}</p>
  </div>`,
  data: {
    firstName: "Mark",
    lastName: "Zuckerberg"
  },
  computed: {
    fullName: function () {
      return this.firstName + " " + this.lastName;
    }
  }
});

Here is a working example.