[Vuejs]-How do i modify, then filter my object property in vuejs

by

0👍

✅

You can split the text simply in the template section like this:

<p v-if="ticket.resource">{{ticket.resource.split('@')[1]}}</p>

new Vue({
  el: "#app",
  data: {
    ticket: {
      "token_type": "Bearer",
      "expires_in": "86399",
      "not_before": "1649632168",
      "expires_on": "1649718868",
      "resource": "00000003-0000-0ff1-ce00-000000000000/contesto.sharepoint.com@ab1e0yeeieieiddk",
      "access_token": "eydsdsadasddefdfdfjfkjnfkflklffjdslnkdsfdisfnlkfmdsjfkfmkdsfjnfjdsfn"
    },
    bearer: "", //taken from all the characters after the @//should be ab1e0yeeieieiddk
    access: "" //taken from access token. Should be eydsdsadasddefdfdfjfkjnfkflklffjdslnkdsfdisfnlkfmdsjfkfmkdsfjnfjdsfn
  },
  methods: {
    toggle: function(todo) {
      todo.done = !todo.done
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Ticket Status:</h2>

  <p v-if="ticket.resource">{{ticket.resource.split('@')[1]}}</p>
  {{bearer}}
  <p v-if="ticket.access_token">{{ticket.access_token}}
  </p><br> {{access}}
</div>

Or you can create a computed property and convert your data to anything you want and use it in the template:

<p v-if="ticket.resource">{{resourceToShow}}</p>

computed: {
  resourceToShow() {
    return this.ticket.resource.split('@')[1];
  },
},

new Vue({
  el: "#app",
  data: {
    ticket: {
      "token_type": "Bearer",
      "expires_in": "86399",
      "not_before": "1649632168",
      "expires_on": "1649718868",
      "resource": "00000003-0000-0ff1-ce00-000000000000/contesto.sharepoint.com@ab1e0yeeieieiddk",
      "access_token": "eydsdsadasddefdfdfjfkjnfkflklffjdslnkdsfdisfnlkfmdsjfkfmkdsfjnfjdsfn"
    },
    bearer: "", //taken from all the characters after the @//should be ab1e0yeeieieiddk
    access: "" //taken from access token. Should be eydsdsadasddefdfdfjfkjnfkflklffjdslnkdsfdisfnlkfmdsjfkfmkdsfjnfjdsfn
  },
  computed: {
    resourceToShow() {
      return this.ticket.resource.split('@')[1];
    },
  },
  methods: {
    toggle: function(todo) {
      todo.done = !todo.done
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Ticket Status:</h2>

  <p v-if="ticket.resource">{{resourceToShow}}</p>
  {{bearer}}
  <p v-if="ticket.access_token">{{ticket.access_token}}
  </p><br> {{access}}
</div>

Leave a comment