[Vuejs]-How do add elements from array into div element where id is equal with array element dealState number in vue.js

by

0👍

✅

below snippet should meet your requirements.

The key point is use v-for loop your arrayForRowNames, then use element.id (it is card.id in below snippet) to find out all elements whose dealState=element.id from the dataArray.

new Vue({
  el: '#app',
  data() {
    return {
      dataArray: [
        {
          "id": 1,
          "title": "bottle sell",
          "value": "100",
          "currency": "default",
          "comment": "cheap deal",
          "dealState": 1
        },
        {
          "id": 2,
          "title": "[wheel sell][1]",
          "value": "0",
          "currency": "default",
          "comment": "MFD",
          "dealState": 2
        }
      ],
      arrayForRowNames: [
        {
          "id": 1,
          "name": "Lead in "
        },
        {
          "id": 2,
          "name": "Contact Made"
        }
      ]
    }
  },
  methods:{
    foundCardDetails: function(id) {
      return this.dataArray.filter((item)=>{ return item && item.dealState === id})
    }
  }
})
.card {
  border: 2px solid green;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div class="card" v-for="(card, index) in arrayForRowNames" :key="index">
<h3>{{card.name}}</h3>
  <div v-for="(detail, indexDetail) in foundCardDetails(card.id)" :key="indexDetail">
    <span>{{detail.title}}</span>
  </div>
</div>
</div>

Leave a comment