时间戳

首页 > 解决方案 > 将输入参数绑定到 VueJS 中的 URL 参数

vue.js - 将输入参数绑定到 VueJS 中的 URL 参数

问题描述

有没有一种简单的方法来绑定输入参数，让人们为 Javascript 计算添加书签？

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>

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

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

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

标签： vue.js

解决方案

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

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
}

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

推荐阅读