我如何修改，然后在 vuejs 中过滤我的对象属性

Question

我有一个对象进入了我的模型。我想将属性分解为模型中的不同部分 - 这样我就可以拆分内容。在这种情况下，我以前从未使用过对象，但是数组，所以不确定什么是解决这个问题的最佳方法。所以我只想剥离返回的数据以仅显示“ab1e0yeeieieiddk”，但在指定区域的模型内部。

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>

Answer 1

您可以像这样简单地在模板部分拆分文本：

<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>

或者您可以创建一个计算属性并将您的数据转换为您想要的任何内容并在模板中使用它：

<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>

我如何修改，然后在 vuejs 中过滤我的对象属性

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

object

vue.js

我如何修改，然后在 vuejs 中过滤我的对象 属性

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

object

vue.js

我如何修改，然后在 vuejs 中过滤我的对象属性