VueJS 从 v-model 更改 URL 参数答案

【问题标题】：VueJS changing URL params from v-modelVueJS 从 v-model 更改 URL 参数
【发布时间】：2020-11-24 08:30:45
【问题描述】：

这里是编码新手。

我必须调用一个 API，我必须在其中更改查询字符串的某些部分以检索不同的结果

简要说明：

<template>
      <div>
        <input type="text" v-model="param" />
      </div>
      <div>
        <input type="text" v-model="param2" />
      </div>
</template>

这将修改脚本区域中的以下 URL：

http://localhost:7000/mock?mockingCode=${param}&mockingCode2=[B]${param2}

【问题讨论】：

您希望在 localhost 上调用的 API（从 URL 中看起来）？您是否使用 Axios 进行调用？
模板中不能有 2 个 div 旁边可以吃其他的

标签： javascript vue.js url query-string v-model

【解决方案1】：

这正是计算的用途： https://vuejs.org/v2/guide/computed.html

    computed: {
        url() {
            return `http://localhost:7000/mock?mockingCode=${this.param}&mockingCode2=[B]${this.param2}`;
        }
    },

【讨论】：

【解决方案2】：

你可以使用watch():

data() {
  return {
    param: '',
    param: '',
    url: 'http://localhost:7000/mock?',
  }
}
watch() {
  param() {
    this.url += '`mockingCode=${this.param}&`';
  }
  param() {
    this.url += '`mockingCode2=[B]${this.param2}&`';
  }
}

【讨论】：