title: Vue Js binding 2 values to a tag href
body: <p>I'm beginner on Vue js. I'm facing an issue where I have to update two values while rendering.</p>
  
  <pre><code>&lt;ul class="category-list"&gt;
      &lt;li v-for="category in categories"&gt;
          &lt;a v-bind:href="location/category.slug/all" v-text="category.name"&gt;&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My javascript file</p>
  
  <pre><code>new Vue({
      el : '#example',
  
      data : {
          location:   'new-york',
          categories: [],
      },
  
      mounted() {
          axios.get('parent-categories').then((response) =&gt; {
              this.categories = response.data;
          });
      },
  });
  </code></pre>
  
  <p>Ajax Response</p>
  
  <pre><code>[{"name":"Default Category","slug":"default-category"},{"name":"Main Category","slug":"main-category"}]
  </code></pre>
  
  <p>Here I wanted to build url structure like location/category-slug/all ie,</p>
  
  <p><a href="http://myapp.com/new-york/default-category/all" rel="nofollow noreferrer">http://myapp.com/new-york/default-category/all</a></p>
  
  <p>How to achieve this?</p>