Question

我想单击一个job.id，然后在下面显示列表（job.names的名称）

以下是表格中的示例

  <td>
    <ul>
      <template v-for='job in jobs'>
        <li @click="show list below job.id">{{ job.id }} </li>
      </template>
    </ul>
  </td>

当我单击job.id时如何显示job.names的名称？

Answer 1

我真的不知道你想做什么。您是否要单击job.id来像这样切换工作详细信息？

<ul>
  <template v-for='job in jobs'>
    <li>
      <span @click='showJob=job.id'>{{job.id}}</span>
      <ul :class="[showJob===job.id?'show':'hide']">
        <li v-for='name in job.names'>{{name}}</li>
      </ul>
    </li>
  </template>
</ul>

Answer 2

您想使用一种方法吗？好的

data(){
 return {
  ...
  jobNames : []
 }
}
showList(i) {
 // if you wanna show them on console
 console.log(this.jobs[i].names)
 // if you wanna show them on the DOM
 this.jobNames = this.jobs[i].names;
}

 <td>
    <ul>
      <template v-for='(job,i) in jobs'>
        <li @click="showList(i)">{{ job.id }} </li>
      </template>
    </ul>
  </td>
  
  <!-- you can place this anywhere you want inside your component template -->

  <ul>
   <li v-for='name in jobNames'>{{name}}</li>
  </ul>

如何通过点击显示项目而不在vue.js中调用方法？

2 个答案: