vuejs - "editing" html inside variable

Question

I've got a variable which has html inside. This is for my wysiwyg editor.

data () {
  return {
     HTMLtext: "<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>New York</b>",
     Place: "London"
   }
 }

Now, I want to change this HTMLtext variable in some places. For example I've got variable called place:

Place: "London"

and I want to replace New York with Place variable into London

What should I do? What is the best approach? Is it generally safe? Is this a good practice?

Generally, no, it's not safe to make arbitrary edits to HTML, and it isn't clear how you would decide to replace, specifically, New York. Can you give us some more description of how this step fits into what you're trying to do? — Roy J
– Roy J, Commented Feb 22, 2018 at 18:24
@RoyJ The first problem is just that: how to replace this part of HTML code. The second, later on, how to sanitize Place variable. I want to make my variables reusable, so my user don't need to type them again. It's not a rocket science, so it should be possible :) — gileneusz
– gileneusz, Commented Feb 22, 2018 at 18:28
I would probably make HTMLtext a computed that returns a template string that substitutes in data items, like ... City ${this.Place} — Roy J
– Roy J, Commented Feb 22, 2018 at 18:34

tony19 · Accepted Answer · 2022-07-15 21:34:51Z

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>

edited Jul 15, 2022 at 21:34

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 22, 2018 at 18:56

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gileneusz Over a year ago

I'll try it, it seems to be the right way. Thank you for your help!

Collectives™ on Stack Overflow

vuejs - "editing" html inside variable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related