1

Many Vue libraries include components that use colons to signify properties, like Buefy's table syntax:

<div v-cloak="true" v-if="MyJSONData != null">
     <b-table
            :data="data"
            :paginated="isPaginated"
            :per-page="perPage"
            :current-page.sync="currentPage"
            :pagination-simple="isPaginationSimple"
            :default-sort-direction="defaultSortDirection"
            default-sort="user.first_name"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page">
    </b-table>
</div>

Visualforce isn't happy with this syntax and doesn't let me save my code, throwing a generic parsing error:

Error Parsing /apex/MyClass: Error Traced[line: 20] Attribute name "v-if" associated with an element type "b-table" must be followed by the ' = ' character.

Is there a way I can encourage Visualforce to play nicely with these custom properties/attributes?

1 Answer 1

1

First, in vue, the colon syntax is short for v-bind. So instead of :per-page you can use v-bind:per-page.

Second, Visualforce's XML parser will interpret v-bind as a namespace, so you need to ensure that namespace is defined on some parent element. For example you can wrap your entire content in an enclosing div: <div xmlns:v-bind="http://vue.org"> (content goes here) </div>

And that will allow you to use v-bind.

2
  • 1
    That totally makes sense! After prefixing the properties with v-bind, and including the xml name space, things work as expected. Thanks!
    – Isaac L
    Commented Apr 22, 2019 at 17:41
  • Glad to hear! Good luck.
    – Charles T
    Commented Apr 22, 2019 at 17:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .