[Vuejs]-Vuejs – "editing" html inside variable

by

4👍

✅

If you make HTMLtext a computed, it can compose the text based on the variables. Template strings are a nice way to interpolate variables into strings.

Here’s an example of what I’m suggesting. I don’t know if that will work in your circumstance because I don’t know where HTMLtext comes from or how you know that New York is in it to be replaced.

new Vue({
  el: '#app',
  data: {
    place: 'New York'
  },
  computed: {
    htmlText() {
      return `<p style="text-align: center;"><b>Hospital</b></p><p> 
       </p><p style="text-align: center;"> <b>Physician</b></p>
       <p></p><p style="text-align: center;"> City <b>${this.place}</b>`;
    }
  }
});
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  Place: <input v-model="place">
  <div v-html="htmlText"></div>
</div>
👤Roy J

Leave a comment