Binding input parameters to URL params in VueJS

Question

Is there an easy way to bind the input parameters, to allow people to bookmark the Javascript calculation?

var app = new Vue({
  el: '#app',
  data: {
    // dummy data
    disksize: 100,
    cost: 0.05,
    items: [{
        freq: "daily",
        qty: 3,
        ratio: 5
      },
      {
        freq: "weekly",
        qty: 0,
        ratio: 10
      },
      {
        freq: "yearly",
        qty: 0,
        ratio: 20
      }
    ],
  },
  computed: {
    initialCost() {
      return Number(this.disksize * this.cost)
    },
    subtotalSize() {
      return this.items.map((item) => {
        return Number(item.qty * item.ratio / 100 * this.disksize)
      });
    },
    subtotalCost() {
      return this.items.map((item) => {
        return Number(item.qty * item.ratio / 100 * this.disksize * this.cost)
      });
    },
    subTotals() {
      return this.items.reduce((subTotals, item) => {
        return Number(subTotals + item.qty * item.ratio / 100 * this.disksize * this.cost)
      }, 0);
    },
     total() {
      return Number(this.initialCost + this.subTotals)
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p><label>Size of disk: <input type=number v-model.number="disksize">GB</label></p>
  <p><label>EBS cost: <input type=number step="0.001" v-model.number="cost">per GB-month of data stored</label></p>
  <p><label>Cost of initial EBS disk: <input readonly :value="initialCost.toFixed(2)">USD per month</label></p>
  <h3>
    EBS snapshots
  </h3>
  <p>
  EBS snapshots are incremental, so if you created a snapshot hourly each snapshot would only be backing up the changes that had been written to the volume in the last hour.
  </p>

  <table title="Retention">
    <thead align="left">
      <th>Frequency</th>
      <th>Quantity</th>
      <th>Ratio</th>
      <th>Size</th>
      <th>Cost per month</th>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items">
        <td><input readonly :value="item.freq.charAt(0).toUpperCase() + item.freq.slice(1)" size="10"></td>
        <td><input type="number" min="0" max="100" v-model.number="item.qty" size="10"></td>
        <td><input type="number" min="0" max="100" v-model.number="item.ratio" size="3">%</td>
        <td><input type="number" step="0.01" :value="subtotalSize[index].toFixed(2)" readonly size="10">GB</td>
        <td><input type="number" step="0.01" :value="subtotalCost[index].toFixed(2)" readonly size="10">USD</td>
      </tr>
    </tbody>
  </table>

  <p>
    <label>Total
      {{initialCost.toFixed(2)}} initial cost + {{subTotals.toFixed(2)}} snapshots = <strong>{{total.toFixed(2)}} USD per month</strong>
    </label>
  </p>

</div>

I don’t want to use npm et al. Just prepackaged URLs like https://unpkg.com/vue-router/dist/vue-router.js ... if that's the solution. I'm not sure.

https://example.com/?disk=100&quantity=3&ratio=5

Quantity/Ratio can actually repeat, not sure what the at looks like in URL params. Any hints?

Raffobaffo · Accepted Answer · 2020-07-12 10:24:25Z

0

If I understand your question correctly, you want to do that allow an url like:

https://example.com/?disk=100&quantity=3&ratio=5

will passdisk,quantity and ratio props to your component.

This is achievable using vue router. One possible way is to use it in function mode:

You can create a function that returns props. This allows you to cast parameters into other types, combine static values with route-based values, etc.
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

answered Jul 12, 2020 at 10:24

Raffobaffo

2,90611 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hendry Over a year ago

I'm unable to get what I want. myce7qa3h8.execute-api.ap-southeast-1.amazonaws.com/staging/… won't allow me to mutate the url params from the input. Furthermore using data doesn't allow me to set the input myce7qa3h8.execute-api.ap-southeast-1.amazonaws.com/staging/…

Alex Mulchinock · Accepted Answer · 2020-08-05 09:20:32Z

0

If you simply want to get the values of a URL parameter and pass them along to a component, you can make use of Javascript's URLSearchParams() method (this won't work in IE 11, but a polyfill might be available).

function getURLParam (param) {
  const queryString = window.location.search // query string from URL
  const params = new URLSearchParams(queryString) // parse query string into object
  return params.get(param) // get the value of the param name passed into function
}

Experiment with the code above. I can't be sure of the exact implementation you need, but this should suffice as a good starting point.

answered Aug 5, 2020 at 9:20

Alex Mulchinock

2,2891 gold badge19 silver badges26 bronze badges

Collectives™ on Stack Overflow

Binding input parameters to URL params in VueJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related