[Vuejs]-Dynamic replace a part of a string with Vue

0๐Ÿ‘

I would say that you need to use a computed value (doc).

The string htmlTitle woudl be a computed value

computed: {
    // ES6
    htmlTitle () {
        return `<a href="${this.slug}">Sky Sport HD in italia dal 18 novembre</a> | <a href="/news/ecco-il-genio-spagnolo-designer-di-moto-elettriche">News</a> | <a href="/news/lg-electronic-e-here-insieme-per-l-auto-connessa-e-autonoma">News</a>`
    }

    // ES5
    htmlTitle: funciton() {
        return "<a href='" + this.slug + "'>Sky Sport HD in italia dal 18 novembre</a> | <a href="/news/ecco-il-genio-spagnolo-designer-di-moto-elettriche">News</a> | <a href="/news/lg-electronic-e-here-insieme-per-l-auto-connessa-e-autonoma">News</a>"
    }
}

0๐Ÿ‘

Use watchers and v-html. When you change slug โ€“ just update variable with link
Here is an example

watch: {
  slug: function(val) {
    this.href = this.result;
  }
}

https://jsfiddle.net/1b68eLdr/52554/

Leave a comment