Повторное использование объекта в компоненте из контейнера - PullRequest
Новая
       7

Повторное использование объекта в компоненте из контейнера

0 голосов
/ 10 сентября 2018

У меня есть контейнер и вид. В настоящее время я размещаю <select> в своем контейнере, который содержит список сайтов. Затем я хочу передать информацию о выбранных сайтах в представление «Reports.vue», чтобы я мог отображать другие релевантные данные для выбранного сайта.

Пожалуйста, см. Ниже для обоих моих файлов, при необходимости я могу обновить с другими файлами, такими как маршрутизатор.

DefaultContainer: 

<form>
    <div class="form-group">
        <label>Select Site</label>
        <select class="form-control">
            <option v-for="site in sites">{{ site.name }}</option>
        </select>
     </div>
</form>
<script>
import sites from '@/_sites'
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
import DefaultAside from './DefaultAside'
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'

export default {
  name: 'full',
  components: {
    AsideToggler,
    AppHeader,
    AppSidebar,
    AppAside,
    TheFooter,
    Breadcrumb,
    DefaultAside,
    DefaultHeaderDropdownAccnt,
    SidebarForm,
    SidebarFooter,
    SidebarToggler,
    SidebarHeader,
    SidebarNav,
    SidebarMinimizer
  },
  data () {
    return {
      nav: nav.items,
      sites: sites.items
    }
  },
  computed: {
    name () {
      return this.$route.name
    },
    list () {
      return this.$route.matched.filter((route) => route.name || route.meta.label )
    }
  }
}
</script>

Reports.Vue: 

<template>
  <div class="animated fadeIn">
    <b-row>
      <b-col sm="6" lg="3">
        <b-card bg-variant="secondary" title="Selected Site Name" sub-title="Site Address">

        </b-card>
      </b-col>
    </b-row>
  </div>
</template>
<script>
  import sites from '@/_sites'

  export default {
    data () {
      return {
        sites: sites.items
      }
     },
    }
</script>

Редактировать: Для уточнения вопроса:

'Как передать выбранный объект в контейнере по умолчанию в представление, чтобы я мог отобразить свойства выбранных объектов? Например: site.address, site.phone, site.name '

...