etc) will not add the :key attribute to the looping element. Will translate to: p( v-for= "(item, key) in items" :key= "key") fooĪny other loop index variable name (eg for item, index., for item, i. However, if you use key as the loop index variable name, :key="key" will automatically be inserted on the looping element. The majority of the time when using pug inside a Vue template, you only really care about Vue data/variables, hence why the more common pug buffered/escaped symbols are transformed into the Vue antlers syntax Loops & Vue iteration keysĪs expected, you can manually specify the :key attribute on the child of a for block. P!= unbuffered // <- will insert 'foo' at compile-time, not dynamically via Vue client-side If you want to output a variable from that unbuffered code in your pug template at compile-time, you can use unescaped buffered code and unescaped string interpolation. If you use unbuffered code, that will not be transformed, instead it will be left in the code for compile-time. Note that for Vue attribute variables you should continue to wrap them in string literals, eg: //- correct a (:href= "someVueVar + '.com'") //- incorrect a (:href=someVueVar + '.com') Instead of writing an ugly mish-mash of pug and Vue syntax in your component, eg: Ī(v- if= "item.type = 'link'" :href= "item.url") some link title: hey there The motivation for this fork is to add first-class pug syntax support in the context of Vue component templates.
If you want first class pug support in Vue component templates, and you don't use Webpack/Laravel Mix, use vue-pug-plugin instead. Forked from pug-plain-loader, added vue-pug-plugin to convert native pug syntax into an AST that Vue will understand. A Webpack loader that compiles pug templates into HTML specifically for use in Vue component templates.
0 kommentar(er)
