Using grouped prismic link fields in a vuetify v-btn properly?

Question

I have a prismic group (link_sections) containing a bunch of fields. One of the fields is a link, because the markup I am creating with these groups is supposed to contain a button that links elsewhere on the site. The problem is that I don't know how to use prismic links properly in this context because as far as I can tell it is not possible to bind the link data inside of a v-btn like so...

<v-layout v-for="(section, index) in fields.link_sections" :key="index">
  <h2>{{section.header}}</h2>
  <v-btn router-link :to="{{section.link}}"></v-btn>
</v-layout>

If I just render out {{section.link}} outside of the v-btn element I can render out the text value of the link successfully, but that's about as much as I can do and obviously I want to use the text as an actual link. Anyone know how I can make a link field from a prismic group work with a v-btn element?

score 0 · Accepted Answer · answered Aug 12 '19 at 19:03

Your syntax is wrong, try this snippet: <v-btn :to="section.link">Link</v-btn>. Also <b-btn></v-btn> has not router-link prop. Just pass prop to. If you pass to prop, it implies that you want that button to be a <router-link>

Denotes the target route of the link.

Using grouped prismic link fields in a vuetify v-btn properly?

1 Answers1