title: Concat value into API url in Vue
body: <p>I am trying something very simple in Vue and can't get it to work.. I want my API url to update with 2 new values (valueFrom and valueTwo). I am using fetch for this.</p>
  <p>When I console log the values, they work (2021-06-17 etc). But as soon as I put them in the url, it just comes up empty.</p>
  <p>Here are my input fields:</p>
  <pre><code>&lt;label for=&quot;dateFrom&quot; class=&quot;mr-sm-2&quot;&gt;From&lt;/label&gt;
            &lt;b-form-datepicker id=&quot;dateFrom&quot; v-model=&quot;valueFrom&quot; class=&quot;mb-2 mr-sm-4 mb-sm-0 w-25&quot; :min=&quot;min&quot; :max=&quot;max&quot;&gt;&lt;/b-form-datepicker&gt;
  
            &lt;label for=&quot;dateTo&quot; class=&quot;mr-sm-2&quot;&gt;To&lt;/label&gt;
            &lt;b-form-datepicker id=&quot;dateTo&quot; v-model=&quot;valueTo&quot; class=&quot;mb-2 mr-sm-4 mb-sm-0 w-25&quot; :min=&quot;min&quot; :max=&quot;max&quot;&gt;&lt;/b-form-datepicker&gt;
  </code></pre>
  <p>Here is the button that calls the fetch:</p>
  <pre><code>&lt;b-button variant=&quot;primary&quot; @click=&quot;$fetch()&quot;&gt;Search&lt;/b-button&gt;
  </code></pre>
  <p>Here is my Vue code:</p>
  <pre><code>    data() {
  const now = new Date();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const minDate = new Date(today);
  const maxDate = new Date(today);
  maxDate.setMonth(maxDate.getMonth() + 6);
  return {
    items: {},
    valueFrom: '',
    valueTo: '',
    min: minDate,
    max: maxDate
  }
  </code></pre>
  <p>},</p>
  <pre><code>async fetch() {
    const api = 'https://apiurl.com/ajax/locationSearchJSON/?location=Edinburgh&amp;arrival=${this.valueFrom}&amp;arrivalTime=12%3A00&amp;departure={$this.valueTo}&amp;departureTime=12%3A00
  this.items = await fetch(api).then(res =&gt; res.json())
  </code></pre>
  <p>}</p>
  <p>I also tried concating them in the javascript way (' + this.valueFrom + ') but that just rendered an empty string as well...</p>