Question

我是Vue的新手，很明显，我在这里缺少一些基本知识。

我有一个带有项目列表的应用程序，单击其中一个项目，然后会出现一个新的“单个”视图。但是除非我刷新页面，否则道具不会进入单个视图。

以下是所讨论的主要标记项目的缩写版本：

import Joi from "joi";

const schema = Joi.object({
  year: Joi.number().when(Joi.ref(`$flag`), {
    is: Joi.boolean().truthy,
    then: Joi.number().min(2000),
  }),
});

const value = {
  year: 1999,
};

const context = {
  flag: true
};

const result = schema.validate(value, { context });

这是我的路线：

<div class="container-fluid" id="app">
    <div class="row">
      <router-view name="default" :partners=partners :partner="partner"></router-view>
      <router-view name="list" :filtered="filtered" ></router-view>
      <router-view name="modalform" :showmodal="showmodal" :partner="partner" :form="form"></router-view>
    </div>
  </div>

<script id="list-template" type="text/template">
  <div class="col-lg-9" id="list">
    <div class="row">
      <div class="col-md-6 col-lg-4" v-for="partner in filtered">
        <router-link  class="link" :to="{ name: 'single', params: { partnerId: partner.id }}">  
          <h6>${partner.name}</h6>
        </router-link>
      </div>
    </div>
  </div>
</script>

这是我组件的简化版本：

  const routes = [
    { 
      path: '/', 
      components: 
      {
        default: Vue.component('sidebar'),
        list: Vue.component('list') 
      },
      props: { 
        default: true, 
        list: true
      }   
    },
    { 
      path: '/:partnerId', 
      name: 'single',
      components: {
        default: Vue.component('single'),
        modal: Vue.component('modalform')
      }, 
      props: { 
        default: true, 
        modal: true 
      }  
    }
  ]

Vue Js：道具未传递到组件，仅在页面刷新时显示

0 个答案: