VueJS changing URL params from v-model

Question

newbie in coding here.

I have to call an API in which I have to change some parts of the querystring to retrieve different results

Briefly explained:

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

This would modify the following URL in the script zone:

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

Is the API you wish to call on localhost (it looks like from the URL)? Are you using Axios to make that call? — bit_junky, Aug 04 '20 at 09:18
you cannot have 2 divs next to eatch other inside a template — bill.gates, Aug 04 '20 at 09:21

score 1 · Answer 1 · edited Jul 15 '22 at 00:25

1

That is exactly what computed is for: https://v2.vuejs.org/v2/guide/computed.html

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

edited Jul 15 '22 at 00:25

tony19

125,647
18
229
307

answered Aug 04 '20 at 11:12

Dennis Utzinger

110
1
7

score 0 · Answer 2 · answered Aug 04 '20 at 11:19

you can use watch():

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

VueJS changing URL params from v-model

2 Answers2