Отображаемый URL, введенный в v-модель в блоке HTML - PullRequest
Новая
       29

Отображаемый URL, введенный в v-модель в блоке HTML

3 голосов
/ 04 июля 2019

Я пытаюсь создать конструктор фрагментов кода в Vue.

Когда я ввожу URL в текстовое поле, я хочу, чтобы URL был вставлен в шаблон HTML, который можно скопировать и вставить вHTML-документ.Основной проблемой здесь является получение вывода в виде необработанного HTML (как вы могли бы видеть в тегах <pre> и <code> в руководстве по Medium).

Код, который я пробовал ( CodePen): 

<div id="app">
  <!--myurl:{{ myUrl }}-->
  'Purchase Link <br><a href="' + myURL + '">' + myURL + "</a>"

  <child v-model="myUrl" />
</div>

const Child = {
  name: 'Child',
  template: `
    <div class="input">
      <input :value="value" @input="$emit('input', $event.target.value)">
    </div>`,
  props: {
    value: String
  }
}

new Vue({
  el: '#app',
  components: {
    Child
  },
  data () {
    return {
      myUrl: ''
    }
  }
})

Желаемый результат: 

<a href="https://amazon.com">amazon.com</a>

Ранее, используя AWS SES и Node, я вставил переменную вкодовый блок как ${myURL}.Не уверен, совместим ли этот подход с Vue.

Ответы [ 3 ]

1 голос
/ 04 июля 2019

Используйте вычисляемое свойство, которое возвращает желаемый HTML, а затем распечатайте его в приложении div.Там вы также можете добавить префикс http/s, если это необходимо: 

computed: {
  fixUrl() {
    return `<a href="${this.myUrl}">`
  }
}

демонстрация codepen

1 голос
/ 06 июля 2019

Насколько я могу сказать, это то, что вы просите: 

const Child = {
  name: 'Child',
  template: `
    <div class="input">
      <input :value="value" @input="$emit('input', $event.target.value)">
    </div>
  `,
  props: {
    value: String
  }
}

new Vue({
  el: '#app',
  
  components: {
    Child
  },
  
  data () {
    return {
      myUrl: ''
    }
  },
  
  computed: {    
    shortUrl () {
      return this.myUrl.replace(/^https?:\/\//, '')
    }
  }
})
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <child v-model="myUrl"></child>
  <template v-if="myUrl">
    Purchase Link <br>
    <code>&lt;a href="{{ myUrl }}"&gt;{{ shortUrl }}&lt;/a&gt;</code>
  </template>
</div>

Попытка нормализовать URL довольно сложна, когда вы начинаете принимать во внимание относительные пути, поэтому я оставил это довольно простым. Он просто удалит http:// или https:// из текста, показанного внутри тега, оставляя href точно таким же, как напечатано.

1 голос
/ 04 июля 2019

Вы должны использовать v-bind для привязки данных к href 

<div id="app">
  Purchase Link <br><a :href="myUrl"> {{ myUrl }} </a>
  <child v-model="myUrl" />
</div>

Демонстрация на codepen

...