Question

我正在尝试将ID从1个Vue传递到另一个Vue，并获取有关我的api服务的数据。

我能够从第一个Vue（ClientListing.vue）传递ID，但是以某种方式我的第二个Vue（Client.vue）无法检索ID。

我的ClientListing.vue


    <th scope="row" v-on:click="rowClicked(row)" style="cursor: pointer"> 
       <div class="media align-items-center" @click="showClient(row)">
          <a class="avatar rounded-circle mr-3">
              <img alt="Image placeholder" :src="row.customerTypeIcon">
          </a>
          <div class="media-body">
              <span class="name mb-0 text-sm">{{row.name}}</span>
          </div>
       </div>
    </th>

methods: {
   showClient(item) {
   router.push({ path: 'Clients/client', query: { id: item.id } });
   }
}

我的Client.vue

mounted: function () {
   CifRepository
   .getCustomerDetails(this.$route.query)
   .then(response => {
      this.model = response.data.Results;
   }
)
.catch(error => {
   console.log(error)
   this.errored = true
})
.finally(() => this.loading = false);
}

getCustomerDetails(id) {
   return Repository.get("/api/Accounts/GetCustomerDetails");
}

我的api服务-AccountsController

[HttpGet("GetCustomerDetails")]
public async Task<CustomerListingDto> GetCustomerDetails(long id)
{

   CustomerServiceModel customers = await
   _accountService.GetCustomerDetailsByCustomerId(id);

   return _mapper.Map<CustomerListingDto>(customers);
}

我的AccountController / GetCustomerDetails继续获得0 / null值，并且无法从ClientListing.vue获得ID传递

Answer 1

应为this.$route.query.id而不是this.$route.query

mounted: function () {
  CifRepository
  .getCustomerDetails(this.$route.query.id)
  .then(response => {
    this.model = response.data.Results;
  })
  .catch(error => {
    console.log(error)
    this.errored = true
  })
  .finally(() => this.loading = false);
}

和

getCustomerDetails(id) {
   return Repository.get("/api/Accounts/GetCustomerDetails/" + id);
}

我不确定C＃部分，但可能是

[HttpGet("GetCustomerDetails/${id}")]
public async Task<CustomerListingDto> GetCustomerDetails(long id)
{

   CustomerServiceModel customers = await
   _accountService.GetCustomerDetailsByCustomerId(id);

   return _mapper.Map<CustomerListingDto>(customers);
}

如何使用Vue JS传递和检索ID？

1 个答案: