代码之家 › 专栏 › 技术社区 › user3699711

如何将数组中的元素添加到div元素中,其中id等于vue中的数组元素dealState号。js公司

vue-component vuejs2 vue.js

user3699711 · 技术社区 · 6 年前

Picture about result 我有两个数组,一个保存行名称

arrayForRowNames = [{
    "id": 1,
    "name": "Lead in "
  },
  {
    "id": 2,
    "name": "Contact Made"
  }
]

另一个数组保存数据

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"
  }
]

我想让render div row的名称为“Lead in”,并且只有这些标题在该div中 arrayForRowNames "id": 1 == "dealState": "1" 等等,它必须是动态的,我怎样才能用vue js做到这一点?

<div class="card">
  <h5 class="card-header bd-callout bd-callout-info">                </h5>
               <div class="card-body no-padding">
                    <draggable  element="ul" class="dragArea list-group" :list="arrayName" :options="{group:'a', animation:150}">

<li class="list-group-item ">   
  <button v-on:click="" class="btn btn-danger btn-sm">X</button>
                  </li>
               </draggable>
           </div>
       </div>

示例div我想做什么,但我不知道怎么做

    <div class="card">
      <h5 class="card-header bd-callout bd-callout-info">Lead in</h5>
                   <div class="card-body no-padding">
                        <draggable  element="ul" class="dragArea list-group" :list="arrayName" :options="{group:'a', animation:150}">

    <li class="list-group-item ">  
 bottle sell
      <button v-on:click="" class="btn btn-danger btn-sm">X</button>
                      </li>
                   </draggable>
               </div>
           </div>

1 回复 | 直到 6 年前

Sphinx 6 年前

下面的代码片段应该满足您的要求。

关键是使用 v-for 循环您的 arrayForRowNames ,然后使用元素。id(下面代码段中的card.id)查找dealState=element的所有元素。来自的id 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>