Pass URL variable to V-bind

I need some serious help. And also some advice on how to best pass a set of URL variables to a v-bind. :rofl:

Example:
http://domain.com/page?prod.upc=1234555&434343

Code below:

`<div class="af-search-filter-checkbox" v-for="product in products" v-cloak>
      <input type="checkbox" v-bind:value="prod.upc" v-bind:id="prod.upc" v-model="searchProd" v-on:click="updateAllFilter"/>
      <label v-bind:for="prod.upc" v-html="prod.title"></label>
    </div>`

You’ll need to expand on this, which v-bind are you trying to bind the url to?

1 Like

Thanks for the quick reply Jason. I am new at Vue, so please bare with my novice question, and as I fumble through things.

I believe I am wanting to bind to v-bind:value=“prod.upc”, which is a product UPC number.

The URL can be generated by a page link as well

The code provided in the initial post shows the method currently used for on page selection of the list of items, with their corresponding UPCs.

Sorry, I’m still not following. Do you want to pass prod.upc to your onclick function?

e.g.

v-on:click="updateAllFilter(prod.upc)"

Or do you want to change the v-bind:value attribute to include the url?

e.g.

v-bind:value="`http://domain.com/page?prod.upc=${ prod.upc }`"

Hoping this clarifies the desired results. Super appreciate the help!

Page 1: Returns a list of products and prompts the user to select a product(s), then click the Apply to see the results:

`<div class="af-search-filter-checkbox" v-for="product in products" v-cloak>
  <input type="checkbox" v-bind:value="prod.upc" v-bind:id="prod.upc" v-model="searchProd" v-on:click="updateAllFilter"/>
  <label v-bind:for="prod.upc" v-html="prod.title"></label>
</div>`

   ` <div class="advanced-search-filter-actions">
   <button class="button button-text" v-on:click="clearFilter">Clear</button>
    <button class="button button-text is-primary" v-on:click="searchMap">Apply</button>
</div>`

Page 2 - I would like to add a link or button to the page that when clicked would hardcode the product and take the user to Page 1 with the results showing on the page.

Ah, ok. So you want Page 1’s products list to be based on the query string parameters of the url.

Assuming you’re using vue-router it provides a query property you can access from the route object. https://router.vuejs.org/api/#route-object-properties.

You can then use this to fetch your appropriate products from an endpoint (or if they’re hardcoded you can use a computed property to filter the array… or manually run your updateAllFilter method - depends on how the rest of your logic works.

Perfect. Super helpful. Thanks again James!