如何将数组中的元素添加到div元素中，其中id等于vue.js中的数组元素状态号

我有两个数组，一个保存行名

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行的名称为“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>

X

我想做什么，但不知道怎么做

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

引入

瓶装销售
X

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

关键点是使用

v-for

循环您的

arrayForRowNames

，然后使用element.id（下面代码段中是card.id）从

数据数组中找出dealState=element.id的所有元素


newvue({
el:“#应用程序”，
数据（）{
返回{
数据阵列：[
{
“id”：1，
“标题”：“瓶装销售”，
“值”：“100”，
“货币”：“默认值”，
“评论”：“廉价交易”，
“交易状态”：1
},
{
“id”：2，
“标题”：“[车轮销售][1]”，
“值”：“0”，
“货币”：“默认值”，
“评论”：“MFD”，
“交易状态”：2
}
],
阵列名称：[
{
“id”：1，
“名称”：“引入”
},
{
“id”：2，
“姓名”：“联系方式”
}
]
}
},
方法：{
foundCardDetails:函数（id）{
返回this.dataArray.filter（（item）=>{return item&&item.dealState===id}）
}
}
})
.card{
边框：2倍纯绿；
边界半径：5px；
}

{{card.name}
{{detail.title}
arrayForRowNames中的每个元素将被呈现到一个div中，然后放入
dataArray.filter（（item）=>{return item.dealState=arrayForRowNames.id}
作为该div的内容？你能给我提供一个小例子或多解释一点吗？我现在不知道你需要什么。所以你需要为预期的输出提供一个例子。我添加了关于我想要什么的图片，但简而言之，我需要添加不同的div-s和数组中的名称，这可以用v-for来完成，但现在我没有了我不知道如何将包含数据数组中的数据的li元素添加到特定的div-s dynamicly.Tnx中，这很有帮助：P