how do i modify, then filter my object property in vuejs-CodePudding

I have an object that comes into my model. I want break the properties up into different sections into the model- so that i can split up the content. I never worked with an object before in this context, but arrays so not sure what is the best way to approach this. So i just want to strip the returned data to just display "ab1e0yeeieieiddk", BUT inside of the model in its designated area.

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}}
</p>
{{bearer}}<p v-if="ticket.access_token">{{ticket.access_token}}
</p><br>
{{access}}
</div>

CodePudding user response：

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>