5

Is it possible to bind mixin arguments to a vue instance?

I have this mixin to render a table:

mixin table(header,data,type)
- var type = type || ""
table.table(class=type)
    thead
        tr
            each head, i in header
                th #{head}
    tbody
        each row,j in data
            tr
                each col,k in row
                    td #{col}

Which can be used normally like this:

+table-striped(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])

My question is if it is possible to take the 'header' and 'data' arguments of the mixin from a vue instance.

Tomás Ferreira
  • 99
  • 1
  • 1
  • 6

1 Answers1

3

I think you're confusing server-side rendering (which is what Pug does) with client-side rendering (which is what Vue.js is typically used to accomplish). You can't dynamically 'call' mixins after HTML has been created, because that would require the Pug renderer to run somewhere in the background, listening for such requests. See also this comment on a related Github issue on the official Pug repo.

However, you can still use Vue.js in combination with Pug, just not in this way. Instead of using a mixin, consider making a custom Vue.js component that gets similar inputs, and then inject the wanted data through some JS-pug-variable magic.

gandreadis
  • 3,004
  • 2
  • 26
  • 38
  • 2
    Thanks for the answer! I actually had made the custom component before trying the mixin, was just wondering if it was possible, after some time I realized it woudn't make much sense. – Tomás Ferreira Sep 09 '17 at 00:05