- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我是 Vue 的新手,过去一两周一直在学习。我似乎不知道如何获取 PhysicianProfile.vue 组件上的特定医生数据。我的模拟数据存储在商店中,我将该信息传递给 PhysicianListing.vue,这是我查看列表的主页(循环访问数据)。
在PhysicianFullListing.vue
中,我传递了一个医生 Prop ,它需要一个对象,并在PhysicianListing.vue
上构建列表卡。我设置了路由来构建 SEO 友好的 URL (/Physician/profile/firstName-lastName-designation
)。
我的问题是如何仅获取我当前在个人资料页面上查看的医生的数据?这看起来很简单,但我完全错过了我需要做的事情。对此的任何帮助将不胜感激。谢谢。
store/store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
physicians: [
{
id: 1,
name: 'Emily Been, MD',
firstName: 'Emily',
lastName: 'Been',
designation: 'MD',
specialty: 'Internal Medicine',
locationDistance: 14,
photo: 'https://placehold.it/75x75',
location: {
title: 'TriStar Centennial',
address: '2300 Patterson St',
city: 'Nashville',
state: 'TN',
zipCode: 37203
}
}, {
id: 2,
name: 'Lisa Gomez, MD',
firstName: 'Lisa',
lastName: 'Gomez',
designation: 'MD',
specialty: 'Internal Medicine',
locationDistance: 14,
photo: 'https://placehold.it/75x75',
location: {
title: 'TriStar Centennial',
address: '2300 Patterson St',
city: 'Nashville',
state: 'TN',
zipCode: 37203
}
}, {
id: 3,
name: 'Raymond Acevedo, MD',
firstName: 'Raymond',
lastName: 'Acevedo',
designation: 'MD',
specialty: 'Internal Medicine',
locationDistance: 14,
photo: 'https://placehold.it/75x75',
location: {
title: 'TriStar Centennial',
address: '2300 Patterson St',
city: 'Nashville',
state: 'TN',
zipCode: 37203
}
}, {
id: 4,
name: 'Christi Mancuso, MD',
firstName: 'Christi',
lastName: 'Mancuso',
designation: 'MD',
specialty: 'Internal Medicine',
locationDistance: 14,
photo: 'https://placehold.it/75x75',
location: {
title: 'TriStar Centennial',
address: '2300 Patterson St',
city: 'Nashville',
state: 'TN',
zipCode: 37203
}
}, {
id: 5,
name: 'Martin Mannings, MD',
firstName: 'Martin',
lastName: 'Mannings',
designation: 'MD',
specialty: 'Internal Medicine',
locationDistance: 14,
photo: 'https://placehold.it/75x75',
location: {
title: 'TriStar Centennial',
address: '2300 Patterson St',
city: 'Nashville',
state: 'TN',
zipCode: 37203
}
}
]
}
})
路由器/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Axios from '@/components/Axios'
import VueResource from '@/components/VueResource'
import PhysicianListing from '@/components/PhysicianListing'
import ProgressSteps from '@/components/ProgressSteps'
import PhysicianProfile from '@/components/PhysicianProfile'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Axios',
component: Axios
},
{
path: '/resource',
name: 'VueResource',
component: VueResource
},
{
path: '/physicians',
name: 'physician-listing',
component: PhysicianListing
},
{
path: '/physicians/profile/:firstName-:lastName-:designation',
name: 'pd-profile',
component: PhysicianProfile
},
{
path: '/progress',
name: 'progress-steps',
component: ProgressSteps
}
]
})
PhysicianFullListing.vue可重用组件
<template>
<li class="pd-item">
<div class="pd-header d-flex align-items-start">
<div class="pd-number">{{physician.id}}</div>
<img :src="physician.photo" alt="" class="pd-photo rounded-circle mr-4">
<div class="pd-info">
<h2 class="pd-title">{{physician.name}}</h2>
<p>{{physician.specialty}}</p>
<p class="pd-location">
<span class="pd-miles">
<i class="material-icons">place</i> {{physician.locationDistance}} miles away
</span><br>
{{physician.location.title}}<br>
{{physician.location.address}},<br>
{{physician.location.city}}, {{physician.location.state}} {{physician.location.zipCode}}
</p>
</div>
</div>
<div class="pd-footer d-flex justify-content-between">
<div class="pd-rating">
<span class="material-icons star-rating">star</span>
<span class="material-icons star-rating">star</span>
<span class="material-icons star-rating">star</span>
<span class="material-icons star-rating">star</span>
<span class="material-icons star-rating">star</span>
</div>
<router-link v-bind:to="{name: 'pd-profile', params: {firstName: physician.firstName, lastName: physician.lastName, designation: physician.designation}}">
View Profile
</router-link>
</div>
</li>
</template>
<script>
export default {
name: 'physician-full-listing',
props: {
physician: Object
},
data () {
return {
msg: 'Physicians Full Listing'
}
}
}
</script>
PhysicianListing.vue重用组件
<template>
<div class="physician-listing">
<h1 class="mt-3 mb-3 text-center">{{msg}}</h1>
<physician-filters></physician-filters>
<physician-search></physician-search>
<div class="row">
<div class="pd-list-column col-4">
<p class="results-txt">Showing 1-5 of {{physicians.length}} results</p>
<ul class="pd-listing list-unstyled">
<physician-full-listing v-for="physician in physicians" :key="physician.id" :physician="physician"></physician-full-listing>
</ul>
<div class="fixed-action-btn">
<router-link to="/progress" class="btn-floating blue">
<i class="material-icons">arrow_downward</i>
</router-link>
</div>
</div>
<div class="col-8">
<google-map name="example"></google-map>
</div>
</div>
</div>
</template>
<script>
import GoogleMap from '@/components/GoogleMap'
import PhysicianFilters from '@/components/physicians/PhysicianFilters'
import PhysicianSearch from '@/components/physicians/PhysicianSearch'
import PhysicianFullListing from '@/components/physicians/PhysicianFullListing'
export default {
name: 'physician-listing',
components: {
PhysicianFullListing,
GoogleMap,
PhysicianFilters,
PhysicianSearch
},
data () {
return {
msg: 'Make an Appointment',
}
},
computed: {
physicians() {
return this.$store.state.physicians
}
}
}
</script>
PhysicianProfile.vue
<template>
<div class="physician-profile">
<h1 class="mb-5">{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'pd-profile',
data () {
return {
msg: 'Physician Profile'
}
}
}
</script>
最佳答案
首先,通过将 props: true
添加到您的路由对象,您可以将路由参数作为 props 传递给您的 PhysicianProfile 组件
{
path: '/physicians/profile/:firstName-:lastName-:designation',
name: 'pd-profile',
component: PhysicianProfile,
props: true
},
然后你可以将这三个属性添加到你的 PhysicianProfile 组件中,并设置一个 Vuex getter 来获取医生:
getters: {
// ...
getPhysicianByDetails: (state) => (firstName, lastName, designation) => {
return state.physicians.find(phys => phys.firstName === firstName && phys.lastName === lastName && phys.designation === designation)
}
}
查看这些内容以进一步阅读
https://medium.com/vue-by-example/learn-quickly-passing-params-as-props-with-vue-router-f4905735b747
关于javascript - 使用路线时从 vuex 存储获取特定数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51327763/
我正在运行一个辅助角色,并检查 Azure 上托管的存储中是否存在数据。当我将连接字符串用于经典类型的存储时,我的代码可以正常工作,但是当我连接到 V2 Azure 存储时,它会抛出此异常。 “远程服
在我的应用程序的主页上,我正在进行 AJAX 调用以获取应用程序各个部分所需的大量数据。该调用如下所示: var url = "/Taxonomy/GetTaxonomyList/" $.getJSO
大家好,我正在尝试将我的商店导入我的 Vuex Route-Gard。 路由器/auth-guard.js import {store} from '../store' export default
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure,并将 Blob ID 存储在我们的数
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure,并将 Blob ID 存储在我们的数
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
我的 Windows 计算机上的本地文件夹中有一些图像。我想将所有图像上传到同一容器中的同一 blob。 我知道如何使用 Azure Storage SDKs 上传单个文件BlockBlobServi
我尝试发出 GET 请求来获取我的 Azure Blob 存储帐户的帐户详细信息,但每次都显示身份验证失败。谁能判断形成的 header 或签名字符串是否正确或是否存在其他问题? 代码如下: cons
这是用于编写 JSON 的 NeutralinoJS 存储 API。是否可以更新 JSON 文件(推送数据),而不仅仅是用新的 JS 对象覆盖数据。怎么做到的??? // Javascript
我有一个并行阶段设置,想知道是否可以在嵌套阶段之前运行脚本,所以像这样: stage('E2E-PR-CYPRESS') { when { allOf {
我想从命令行而不是从GUI列出VirtualBox VM的详细信息。我对存储细节特别感兴趣。 当我在GUI中单击VM时,可以看到包括存储部分在内的详细信息: 但是到目前为止,我还没有找到通过命令行执行
我有大约 3500 个防洪设施,我想将它们表示为一个网络来确定流动路径(本质上是一个有向图)。我目前正在使用 SqlServer 和 CTE 来递归检查所有节点及其上游组件,只要上游路径没有 fork
谁能告诉我 jquery data() 在哪里存储数据以及何时删除以及如何删除? 如果我用它来存储ajax调用结果,会有性能问题吗? 例如: $("body").data("test", { myDa
有人可以建议如何为 Firebase 存储中的文件设置备份。我能够备份数据库,但不确定如何为 firebase 存储中的文件(我有图像)设置定期备份。 最佳答案 如何进行 Firebase 存储的本地
我最近开始使用 firebase 存储和 firebase 功能。现在我一直在开发从功能到存储的文件上传。 我已经让它工作了(上传完成并且文件出现在存储部分),但是,图像永远保持这样(永远在右侧加载)
我想只允许用户将文件上传到他们自己的存储桶中,最大文件大小为 1MB,仍然允许他们删除文件。我添加了以下内容: match /myusers/{userId}/{allPaths=**} { al
使用生命周期管理策略将容器的内容从冷访问层移动到存档。我正在尝试以下策略,希望它能在一天后将该容器中的所有文件移动到存档层,但事实并非如此在职的。我设置了选择标准“一天未使用后”。 这是 json 代
对于连接到 Azure 存储端点,有 http 和 https 两个选项。 第一。 https 会带来开销,可能是 5%-10%,但我不支付同一个数据中心的费用。 第二。 http 更快,但 Auth
有人可以帮我理解这一点吗?我创建了Virtual Machine in Azure running Windows Server 2012 。我注意到 Azure 自动创建了一个存储帐户。当我进入该存
我是一名优秀的程序员,十分优秀!