В квазаре как передать данные в макет со страницы - PullRequest
0 голосов
/ 08 мая 2018

В http://quasar -framework.org / у меня есть несколько экранов с одинаковым расположением, например списки продуктов и клиентов.

Но я не понимаю, как передать данные со страницы в их макет. Например, макет имеет заголовок, который я хочу изменить в зависимости от того, какая страница отображается:

//Routes:
  {
    path: '/orders',
    component: () => import('layouts/list'),
    children: [
      { name: 'pickCustomer', path: '/customer', component: () => import('pages/CustomersList') },
      { name: 'pickProducts', path: '/products/:customer_id', component: () => import('pages/AddProductsList') },
      { name: 'addProduct', path: '/addproduct/:order_id/:product_id', component: () => import('pages/AddProductsList') },
      { name: 'confirmOrder', path: '/confirm/:order_id', component: () => import('pages/AddProductsList') }
    ]
  }

//list.vue
    <template>
      <q-layout>
        <q-layout-header>
            <q-toolbar>
            <q-btn
                flat
                round
                dense
                icon="chevron_left"
                @click="leftDrawer = !leftDrawer"
            />
            <q-toolbar-title>
                {{title}}
            </q-toolbar-title>
            <q-btn flat round dense icon="save" label="Add" />
            </q-toolbar>

            <q-toolbar>
            <q-toolbar-title>
                <q-search v-model="search" @input="change" inverted color="none" />
            </q-toolbar-title>
            </q-toolbar>
        </q-layout-header>          </q-layout>
    </template>

    <script>    
    export default {
      // name: 'LayoutName',
    }
    </script>

//Customers.vue
<template>
</template>

<script>
import CustomersRows from '../statics/json/customers.json'

export default {
  data () {
    return {
      title: 'Customers', <--HOW TO PASS THIS?
    }
  }
}
</script>

1 Ответ

0 голосов
/ 06 октября 2018

mamcx, этот ответ очень поздно. Но все же, если кто-то найдет это полезным .....

Теперь я использую Квазар CLI ........ v0.17.20 Quasar Framework .. v0.17.17 В Quasar, если вы хотите передать информацию с одной страницы на родительский макет, мы можем использовать шину, как мы используем ее в VueJS, Но сначала мы должны зарегистрировать это. Итак, в древовидной структуре в папке плагинов (которая находится в папке src) создайте файл .js (например, myplugin.js). На этой странице напишите ....

 export default ({ app, router, Vue }) => {
  // something to do
  var bus = new Vue()
  Object.defineProperties(Vue.prototype, {$bus: {get: function () { return bus }}})
}

После этого МЫ должны зарегистрировать этот myplugin.js на нашем ...

quasar.conf.js

In quasar.conf.js,

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
      'axios',
      'myplugin', // WE REGISTER OUR myplugin.js
      'comm'
    ],
    css: [
      'app.styl'
    ],
...............
.............
....

Теперь предположим, что мы хотим передать ваш заголовок "Клиенты" со страницы "Клиенты" на родительский макет

Мы пишем на странице, созданной на странице клиента.

created () {
  this.$bus.$emit('Title', 'Customers')
}

А на нашем основном Макете я пишу

methods: {
    getTitle: function (Title) {
      this.Header = Title  // Header is my variable
      console.log(this.Header)
    }
  },
 created () {
    this.$bus.$on('Title', this.getTitle)
  }

и мы сделали !!!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...