将输入参数绑定到 VueJS 中的 URL 参数 [英] Binding input parameters to URL params in VueJS

问题描述

是否有一种简单的方法来绑定输入参数，允许人们为 Javascript 计算添加书签?

var app = new Vue({el: '#app',数据: {//虚拟数据磁盘大小:100，成本:0.05，项目: [{频率:每天"，数量:3，比例:5},{频率:每周"，数量:0,比例:10},{频率:每年"，数量:0,比例:20}],},计算:{初始投资成本() {返回数字(this.disksize * this.cost)},小计大小(){返回 this.items.map((item) => {返回数量(item.qty * item.ratio/100 * this.disksize)});},小计成本(){返回 this.items.map((item) => {返回数量(item.qty * item.ratio/100 * this.disksize * this.cost)});},小计(){返回 this.items.reduce((subTotals, item) => {return Number(subTotals + item.qty * item.ratio/100 * this.disksize * this.cost)}, 0);},全部的() {返回数字(this.initialCost + this.subTotals)}}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><p><label>磁盘大小:<input type=number v-model.number="disksize">GB</label></p><p><label>EBS 成本:<input type=number step="0.001" v-model.number="cost">每 GB 月存储的数据</label></p><p><label>初始 EBS 磁盘的成本:<input readonly :value="initialCost.toFixed(2)">每月 USD</label></p><h3>EBS 快照<p>EBS 快照是增量的，因此如果您每小时创建一个快照，每个快照只会备份在过去一小时内写入卷的更改.</p><表格标题="保留"><thead align="left"><th>频率</th><th>数量</th><th>比率</th><th>大小</th><th>每月成本</th></thead><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><p><标签>总计{{initialCost.toFixed(2)}} 初始成本 + {{subTotals.toFixed(2)}} 快照 = <strong>{{total.toFixed(2)}} 美元/月</strong></p>

我不想使用 npm 等.只是预先打包的 URL，如 https://unpkg.com/vue-router/dist/vue-router.js ... 如果那是解决方案.我不确定.

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

数量/比率实际上可以重复，不确定 URL 参数中的 at 是什么样子.有什么提示吗?

解决方案

如果您只想获取 URL 参数的值并将它们传递给组件，您可以使用 Javascript 的 URLSearchParams() 方法(这在 IE 11 中不起作用，但可能有一个 polyfill).

function getURLParam (param) {const queryString = window.location.search//来自 URL 的查询字符串const params = new URLSearchParams(queryString)//将查询字符串解析为对象return params.get(param)//获取传入函数的参数名的值}

用上面的代码进行实验.我无法确定您需要的确切实现，但这应该足以作为一个好的起点.

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?

解决方案

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.

这篇关于将输入参数绑定到 VueJS 中的 URL 参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！