Reconfigure a portion of a string using Vue's dynamic replacement feature

Currently tackling a problem.

In my possession is a string that essentially consists of HTML code:

let htmlTitle = "<a href="/news/sky-sport-hd-in-italia-dal-18-novembr">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>"

This particular string is sourced from my database.

Within my Vue app, there is an input field labeled "slug", containing the following snippet:

"sky-sport-hd-in-italia-dal-18-novembr"

essentially representing the permalink for the initial item referenced in the string.

Upon modifying the input field value, I require the title string to dynamically adjust accordingly. However, the method eludes me.

The title string may include numerous anchor tags, and I specifically aim to update only the href attribute linked to the slug.

Hence, what's needed is something akin to this:

"<a href="{{ 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>"

A computed value can indeed be employed, but bear in mind that the string might undergo modifications through a Wysiwyg editor, where titles like 'Sky Sport HD in italia dal 18 novembre' or 'News' are altered. The primary focus remains on retaining alignment with the slug...

javascriptvue.js

Answer №1

Utilize watchers and v-html to dynamically update a variable with a link when the slug is changed. Check out this code snippet below:

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

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

Answer №2

It is recommended to utilize a computed value in this scenario (documentation).

The variable htmlTitle should be assigned as 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>"
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch Button Hyperlink in HTML/CSS

I have the following code: document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList ...

javascripthtmljquerycssanimation

How to integrate a jQuery plug-in into your Meteor 1.7.0.3 project

Recently, I delved into using Meteor for the first time, and it has been about a week since I started exploring its functionalities. However, I encountered an issue with integrating jQuery plugins that were installed via npm. After running: meteor npm i ...

javascriptjquerymeteor

HTML and CSS for an off-canvas menu

Looking to create an off-canvas menu that smoothly pushes content out of view instead of cropping it. Additionally, I want to implement a feature that allows the menu to close when clicking outside of it. I found the code for the off-canvas menu on W3Scho ...

javascripthtmlcssoff-canvas-menu

What is the best way to adjust the dimensions of a textfield in Vuetify by altering its width and height?

Is there a way to adjust both the width and height of the <v-text-field>tag? I attempted to modify it using .css, but it seems to only affect certain parameters, leaving large white spaces on my page. This is the method I have tried so far: <te ...

cssvue.jsvuejs2vue-componentvuetify.js

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

javascripthtmlangularjsangularjs-scope

Organizing an array of objects by sorting them according to their internal data and grouping them together

Looking to organize this array of objects in a hierarchical structure: var channels = [{ cid: 5, pid: 10 }, { cid: 10, pid: 0 }, { cid: 20, pid: 5 }, { cid: 15, pid: 10 }]; In this case, cid represents channel Id and pid r ...

javascriptnode.js

What methods can I use to transfer data from one domain to another domain utilizing Ajax JSONP?

Example: The URL of my site is "http://localhost:54887/CustomOrdering.html", but I want to retrieve data from another site "http://localhost:27746/Orders.aspx". In order to do this, I have implemented the following code in my CustomOrdering.html: function ...

javascriptjqueryasp.netajax

Troubleshoot my code for clustering markers on a Google map

I'm currently working on a piece of code to generate a Google map that contains 3 hidden points within one marker. The idea is that when the main marker is clicked, these points will either merge into one or expand into 3 separate markers. However, I& ...

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersmarkerclusterer

Having trouble with Laracast Video(Push Events to the Client) error?

After following a video tutorial on event handling, everything was working perfectly until the last minute when I tried to display the user name in real time on a list view. Although I could see each object in my console using console.log('users' ...

laravelvue.js

Using Vue.js to display initial product listings on the webpage using Laravel

Incorporating both Laravel and Vue in my shopping application has been a great experience. Initially, the products are retrieved by Laravel and then passed to the view which is later utilized as initial data for the vue script. This data plays a crucial ...

laravelvue.js

What is the best way to set the length of an undefined item in an object to 0 in reactjs?

I am facing a challenge keeping track of scores within each article and displaying them accurately. The issue arises when there is a missing "up" or "down" item in the object. Below is the data containing all the votes: const votes = { "1": { "up": ...

javascriptjsonreactjs

Generate a new perspective by incorporating two distinct arrays

I have two arrays containing class information. The first array includes classId and className: classes = [ {classid : 1 , classname:"class1"},{classid : 2 , classname:"class2"},{classid : 3 , classname:"class3"}] The secon ...

javascripthtmlangulartypescriptangular8

Using jQuery to trigger alert only once variable has been updated

I have a question that may seem too basic, but I can't find the solution. How do I make sure that the variables are updated before triggering the alert? I've heard about using callbacks, but in this case, there are two functions and I'm not ...

javascriptjquery

Detecting the failure of chrome.extension.sendRequest

Greetings Chrome Developers! I am wondering how one can determine when a chrome.extension.sendRequest call has not been successful. I attempted the following approach with no luck: chrome.extension.sendRequest({ /* message stuff here */ }, function(req){ ...

javascriptgoogle-chromegoogle-chrome-extension

Storing data in a TypeBuffer and then retrieving it from a file can lead to surprising outcomes

Upon executing the following code: var list = new Uint32Array(16); for (var i=0; i<16; ++i) list[i] = i; fs.writeFileSync("list", new Uint8Array(list).buffer); console.log([].slice.call(new Uint32Array(fs.readFileSync("list")))); We anticipate the out ...

javascriptnode.jsfileio

Using Two JavaScript Functions with Identical Names in One HTML File

I am currently facing an issue with a function where the data is retrieved from the getValue() function. The following code snippet is a fragment. grid.js function gridLoadComplete(){ var data = getValue(); } Take into account the following H ...

javascriptjqueryhtml

What are the capabilities of an INNER JOIN query in Objection JS?

Here is the data model that I am working with: https://i.stack.imgur.com/g1T5i.jpg In this model, a User can be associated with multiple Projects, and a Project can have many Users. These relationships are managed through a join table called UserProjects. ...

javascriptnode.jspostgresqlobjection.js

The content remains constant when navigating within the same view

Vuejs3 Composition API Route File: Below is the route configuration for SingleBoard.vue, which displays content based on passed props: const routes = [ { path: "/singleboard/:dbName/:dbMethod/:securityType/:alertType", name: & ...

vue.jsvuejs3

Unable to establish a connection with Metamask

Looking to connect to Metamask and retrieve the account balance: <!DOCTYPE html> <html> <head> <title>Testing Ethereum with Metamask</title> <meta charset="UTF-8"> <meta name=&quo ...

javascriptethereumblockchaincdnethers.js

Can someone please explain how to use the prevState in REACT?

Can you explain the difference between how to define the counterHandler function in these two examples? counterHandler = () => { this.setState(() => { return { times: this.state.times + 1 } }); } versus counterHandle ...

javascriptreactjsreact-nativereact-redux