Vue.js 如何使用VueJS从JSON响应中提取单个记录（id）并在DOM中显示？

我创建了一个列表视图来查看JSON API响应中的记录。现在我想让用户点击一个图标，例如“>”，在整个页面上只看到那个记录（详细视图）。我不确定需要使用哪个vue指令以及如何在DOM中显示

我试过了，但指令v-for不起作用

<template>
      <div id="app" class="container">
        <p v-if="loading">Loading...</p>
        <div v-else>
       <h3 class="heading" style="text-align:left">Patients List</h3>
      <input id="lens" v-model= "search" placeholder ="Search here">
      <br></br>



  </div>


      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Mobile</th>
            <th scope="col">Email</th>


          </tr>
        </thead>
        <tbody>
          <tr v-for="patient in filteredPatients" v-bind:key="patient">
            <td>{{ patient.id }}</td>
            <td>{{ patient.first_name + " " + patient.last_name }}</td>
            <td>{{ patient.mobile }}</td>
            <td>{{ patient.email }}</td>
          </tr>
        </tbody>
      </table>




    </div>


  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'app',
  data () {
    return {
      loading: false,
      patients: '',
      search: '',

    }
  },
  mounted () {
    this.loading = true;
    axios
      .get('http://localhost:8000/Patients/?format=json')
      .then(response => (this.patients = response.data))
      .catch(error => console.log(error))
      .finally(() => this.loading = false)

  },




computed: {
    filteredPatients() {
      return this.patients.filter(patient => {
       return `${patient.first_name} ${patient.last_name} ${patient.email}           ${patient.mobile} ${patient.id}`.includes(this.search);

    })
  }

加载
病人名单



身份证件
名称
可移动的
电子邮件
{{patient.id}
{{patient.first_name+“”+patient.last_name}
{{patient.mobile}}
{{patient.email}
从“axios”导入axios；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
加载：false，
病人：''，
搜索：“”，
}
},
挂载（）{
这是。加载=真；
axios
.get（'http://localhost:8000/Patients/?format=json')
.然后（response=>（this.patients=response.data））
.catch（错误=>console.log（错误））
.最后（（）=>this.loading=false）
},
计算：{
过滤病人（）{
返回此.patients.filter（patient=>{
返回`${patient.first\u name}${patient.last\u name}${patient.email}${patient.mobile}${patient.id}`.includes（this.search）；
})
}

通过

filteredPatients（）

方法，您只返回三个字段，即

名字、姓氏和电子邮件

，但从循环中，您希望得到五个字段，即

id、名字、姓氏、电子邮件和手机

直接从数据部分的patients值获取数据，但首先必须将其更改为数组

之后，在表行上单击一个

onclick

listener，并将特定产品作为参数传递给listener方法。这样，您将拥有选中/单击的记录。从这里，您可以将记录作为道具传递到另一个页面

所以最终的代码看起来会像这样：

      <div id="app" class="container">
        <p v-if="loading">Loading...</p>
        <div v-else>
       <h3 class="heading" style="text-align:left">Patients List</h3>
      <input id="lens" v-model= "search" placeholder ="Search here">
      <br></br>



  </div>


      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Mobile</th>
            <th scope="col">Email</th>


          </tr>
        </thead>
        <tbody>
          <tr v-for="(patient,id )in  patients" :key="id" @click="getOneRecord(patient)">
            <td>{{ patient.id }}</td>
            <td>{{ patient.first_name + " " + patient.last_name }}</td>
            <td>{{ patient.mobile }}</td>
            <td>{{ patient.email }}</td>
          </tr>
        </tbody>
      </table>




    </div>


  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'app',
  data () {
    return {
      loading: false,
      patients: {},
      search: '',

    }
  },
  mounted () {
    this.loading = true;
    axios
      .get('http://localhost:8000/Patients/?format=json')
      .then(response => (this.patients = response.data))
      .catch(error => console.log(error))
      .finally(() => this.loading = false)

  },




computed: {
    filteredPatients() {
      return this.patients.filter(patient => {
       return `${patient.first_name} ${patient.last_name} ${patient.email}           ${patient.mobile} ${patient.id}`.includes(this.search);

    })
  },
methods:{
   getOneRecord(record):{

}

}

加载
病人名单



身份证件
名称
可移动的
电子邮件
{{patient.id}
{{patient.first_name+“”+patient.last_name}
{{patient.mobile}}
{{patient.email}
从“axios”导入axios；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
加载：false，
病人：{}，
搜索：“”，
}
},
挂载（）{
这是。加载=真；
axios
.get（'http://localhost:8000/Patients/?format=json')
.然后（response=>（this.patients=response.data））
.catch（错误=>console.log（错误））
.最后（（）=>this.loading=false）
},
计算：{
过滤病人（）{
返回此.patients.filter（patient=>{
返回`${patient.first\u name}${patient.last\u name}${patient.email}${patient.mobile}${patient.id}`.includes（this.search）；
})
},
方法：{
getOneRecord（记录）：{
}
}

您是否收到任何错误？在分配给患者之前，请尝试

控制台.log（response）

。并在您的数据中将患者设置为空数组

患者：[]

@DaniyalLukmanov当我使用而不是一个空白页面时，我没有看到任何错误。响应是什么样子的（即

response.data

的内容）？