Question

我有一个容器和一个视图。我目前在一个容器中托管一个<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'

重用容器中组件中的对象

0 个答案: