using mtable.grid

[Jorge Salvat]

Hi,

must be doing something wrong trying to implement a grid on the myfeed app:

controllers.py

from py4web.utils.publisher import Publisher, ALLOW_ALL_POLICY

publisher = Publisher(db, policy=ALLOW_ALL_POLICY)

@authenticated()

def feeds():

   return dict(grid=publisher.grid(db.feed_item))

feeds.html

[[extend "layout.html"]]

<h1 class="title">All the Feeds</h1>

[[=grid]]

plus copied  mtable.html  and  mtable.js  from  _dashboard/static/components/  into  myfeed/static/components/

The page shows, but not the grid, even the code is inserted:

<section class="section">

<!-- beginning of HTML inserted by extending template -->

<h1 class="title">All the Feeds</h1>

<div id="vue10a50c9f"><mtable url="/myfeed/service/5d7a065b-0590-4d78-a76d-8f79979b0f16/feed_item" filter="" order="" :editable="true" :deletable="true" :create="true" :render="{}"></mtable><SCRIPT src="/myfeed/static/js/axios.min.js"></SCRIPT><SCRIPT src="/myfeed/static/js/vue.min.js"></SCRIPT><SCRIPT src="/myfeed/static/js/utils.js"></SCRIPT><SCRIPT src="/myfeed/static/components/mtable.js"></SCRIPT><SCRIPT>var app=utils.app("vue10a50c9f"); app.start()</SCRIPT></div>

<!-- end of HTML inserted by extending template -->

</section>

Thanks,

Jorge

[Ivica Kralj]

I had the same problem but didn't have enough time to look into it...

The quick workaround is to copy the example app (https://github.com/web2py/py4web/tree/master/apps/examples)  and rename it if you need to.
Then it works from the examples app.

[Massimo]

Hello Jorge,

 was able to make it work with this template (vue way):

[[extend "layout.html"]]
<h1 class="title">All the Feeds</h1>

<div id="vue">
  [[=grid]]
</div>
[[block page_scripts]]
<script>
  new Vue({'el':'vue'});
</script>
[[end]]

OR using py4web way if you have utils.js from _dashboard

[[extend "layout.html"]]
<h1 class="title">All the Feeds</h1>

<div id="vue">
  [[=grid]]
</div>
[[block page_scripts]]
<script>
  let app = utils.app(); // crate the vue app
  app.data.loading = 0;  // no loading screen
  app.start();           // start it
</script>
[[end]]

The problem was that mtable is a vue plugin and publisher.grid crates the plugin instance but you still need to instantiate the vue object.

[Jorge Salvat]

Thanks Massimo, Both solutions worked fine.