HTML 블록 내의 v-model에 입력된 URL 표시

HTML 블록 내의 v-model에 입력된 URL 표시

Vue에서 코드 스니펫 빌더를 작성하려고 합니다.

텍스트 상자에 URL을 입력할 때 HTML 템플릿에 URL을 삽입하여 HTML 문서에 복사하여 붙여넣기를 원합니다.여기서 중요한 문제는 출력을 raw HTML로 얻는 것입니다( 참조).<pre>그리고.<code>태그를 지정합니다).

시도해 본 코드(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와 노드를 사용하여 코드 블록에 변수를 삽입했습니다.${myURL}이 접근 방식이 Vue와 호환되는지 확실하지 않습니다.

내가 알기로는 이게 네가 원하는 거야

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정확히 입력된 대로.

v-bind를 사용하여 데이터를 href에 바인딩해야 합니다.

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

코드펜 데모

원하는 HTML을 반환하는 계산된 속성을 사용하여 앱에서 인쇄합니다.div. 거기에서는, 또, add를 할 수 있습니다.http/s필요한 경우 접두사:

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

코드펜 데모

언급URL : https://stackoverflow.com/questions/56888915/display-url-entered-in-v-model-within-a-html-block