在 vue.js 模板中显示主机名 [英] showing the hostname in a vue.js template

问题描述

说我有这样的事情:

<q-input v-model="form.uuid" reverse-light color="white" stack-label="您的子域:" @blur="$v.form.uuid.$touch":error="$v.form.uuid.$error"后缀=".website.com"></q-input>

现在 .website.com 是硬编码的，但如果我想让它基于用于访问网站的主机名怎么办?IE.如果我访问 mydomain.tld，它不会显示 website.com - 它会显示 mydomain.tld.

有什么想法吗?

谢谢！

解决方案

这里的困难部分是删除子域.我不知道有什么可靠的方法可以做到这一点.

在模板中获取host渲染应该很容易:

new Vue({el: '#app',数据 () {返回 {currentUrl: location.toString(),主机:location.host}}})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"><<;/脚本><div id="应用程序"><p>完整:{{ currentUrl }}</p><p>主机:{{主机}}</p>

显然，它需要针对原始示例进行调整，例如 :suffix="'.'+ 主机".

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!

解决方案

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".

这篇关于在 vue.js 模板中显示主机名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！