Question

我有一个“单击此处获取更多详细信息”按钮，但单击该按钮不会加载Details.vue，因此它不会在页面上显示更多信息。但是我收到此错误。属性或方法“ Details”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

ArticleListItem.vue

<template>
  <div>
    <div class="card-body"> 
    <h6 class="card-text">{{ result.title }}</h6>
      <p class="card-subtitle mb-2 text-muted"
      >{{ result.publisher }} | {{ result.journal }} | {{ result.year }}</p>
      <a :href="'https://test.org/api/articles?docid=' + result._gddid" target="_blank">
        <i class="fa fa-download"  alt="Download"> </i>
      </a>
        <router-link dark :to="{name: 'Details', params: {id: result._gddid}}">
              Click here for more Details
        </router-link>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleListItem',
  props: ['result'],  
}
</script>

Details.vue

<template>
    <div class="Details">
        <div class="container">
            <div class="row">
                <div class="col-md-12" v-for="result in results" :key="result._gddid"> 
                    <div v-if="id == result._gddid">
                        <h1>{{results.title}}</h1>
                    </div>
                </div>      
            </div>
        </div> 
    </div>    
</template>
<script>
 export default {
  name: 'Details',
  computed: { results(){ return this.$parent.$data.results } }
  
};
</script>

main.js

 import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; import moment from 'moment'

Vue.config.productionTip = false

Vue.filter('formatDate', function (value) {
  if (!value) return ''
  return moment(value.toString()).format('MM/DD/YYYY hh:mm')
})

Vue.use(VueRouter)

import Details from './components/Details';

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
     path: '/Details/:id',
     name: 'Details',
     component: Details
   }
 ]
})


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

VUE路由器详细信息未定义

0 个答案: