How to extract vuejs data value-CodePudding

data(){
  return {
      filters: [
        { key: 'a', value: '12' },
        { key: 'b', value: '34' },
        { key: 'c', value: '56' },
        { key: 'd', value: '78' },
        { key: 'e', value: '90' },
      ], 
  }
}

How to extract '34' ?

Can we achieve that like this ?

console.log(this.filters.key)

CodePudding user response：

You can achieve this by using Array#find method.

this.filters.find(({ value }) => value === '34').value;

Live Demo :

new Vue({
  el: '#app',
  data(){
    return {
      filters: [
        { key: 'a', value: '12' },
        { key: 'b', value: '34' },
        { key: 'c', value: '56' },
        { key: 'd', value: '78' },
        { key: 'e', value: '90' },
      ], 
    }
  },
  computed: {
    getValue() {
        return this.filters.find(({ value }) => value === '34').value;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{ getValue }}</p>
</div>