3

Say I have something like this:

<q-input v-model="form.uuid" inverted-light color="white" stack-label="Your subdomain:" @blur="$v.form.uuid.$touch"
    :error="$v.form.uuid.$error"
    suffix=".website.com">
</q-input>

Right now .website.com is hard-coded but what if I wanted to make it so that it was based off of the hostname that was used to access the website? ie. if I went to mydomain.tld it wouldn't show website.com - it'd show mydomain.tld.

Any ideas?

Thanks!

neubert
  • 15,947
  • 24
  • 120
  • 212
  • Possible duplicate of [How to extract the hostname portion of a URL in JavaScript](https://stackoverflow.com/questions/1368264/how-to-extract-the-hostname-portion-of-a-url-in-javascript) – Trenton Trama Oct 08 '19 at 01:52
  • @TrentonTrama - I'm trying to do it in vue.js. Doing `$('q-input').attr('suffix', host)` is unlikely going to work. – neubert Oct 08 '19 at 01:55

1 Answers1

6

The difficult part here is removing the subdomain. I'm not aware of a reliable way to do that.

Just getting the host rendering in the template should be easy enough:

new Vue({
  el: '#app',
  
  data () {
    return {
      currentUrl: location.toString(),
      host: location.host
    }
  }
})
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <p>Full: {{ currentUrl }}</p>
  <p>Host: {{ host }}</p>
</div>

Obviously it'd need to be tweaked for the original example, something like :suffix="'.' + host".

skirtle
  • 27,868
  • 4
  • 42
  • 57