1

我有一个容器和一个视图。我目前<select>在我的容器中托管一个列出一堆站点的容器。然后，我想将所选站点信息传递给一个名为“Reports.vue”的视图，以便我可以向所选站点显示其他相关数据。

请参阅下面的两个文件，如果需要，我可以使用其他文件（例如路由器）进行更新。

默认容器：

<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>

报告.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'

4

0 回答 0