title: How to define a Nuxt link in a Vuetify button when portion of the path belongs to $route.params?
body: <p>In Nuxt and Vuetify application, I have a series of buttons:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;v-btn dark color=&quot;orange&quot; href=&quot;className/studentName&quot; nuxt&gt;
    &lt;v-icon large left&gt;favorite&lt;/v-icon&gt;
    studentName
  &lt;/v-btn&gt;
  </code></pre>
  <p>I want to refactor this code knowing that I get className from the route: <code>$route.params.className</code> And I get studentName from a normal JavaScript array.</p>
  <p>When I type href={{$route.params.className}}/studentName I get an error:</p>
  <blockquote>
  <p>Use v-bind or the colon shorthand instead. For example, instead of</p>
  , use .
  </blockquote>
  <p>And when I do it that way:</p>
  <pre><code>:href=&quot;$route.params.className/studentName&quot;  
  </code></pre>
  <p>I get this error instead:</p>
  <blockquote>
  <p>Invalid prop: type check failed for prop &quot;href&quot;. Expected String,
  Object, got Number.</p>
  </blockquote>
  <p>So how to define correctly my <code>href</code> prop without hard writing <code>className</code> (I mean I want to use <code>$route.params.className</code> in order to refactor my code which has several buttons?</p>