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

Discovering the function invoker when in strict mode

I am facing a challenge in my Angular controller where I have a function called getGames() that can be triggered by both the init() and update() functions. The issue is, I need to handle these two scenarios differently based on which function called getGam ...

javascriptangularjsstrict

Utilizing encoding and decoding techniques in PHP and JavaScript with robust data attribute validation

I am utilizing data attributes to transfer information from HTML to JavaScript. The data attributes are derived from MySQL data, so they may contain spaces, resulting in validation errors since spaces are not permitted within attributes. My proposed solut ...

phpjavascripthtmlvalidationencode

Express.js: Initial Request Fails to Retrieve Set Cookie

In my Express.js application, I am facing an issue where setting a cookie in one middleware function results in it being undefined when attempting to access it in the following middleware function on the initial request. Strangely, on subsequent requests, ...

javascriptnode.jsexpresscookiesmiddleware

What is the best way to insert a row into a JavaScript table while incorporating a cell that utilizes the datepicker function in jQuery?

Currently, I am working on a javascript function: function addItem(tableID){ var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var el ...

javascriptjqueryhtmldatepicker

Assign local variable in Mongoose using query results

I created a function to query MongoDB for a credential (simplified): var query = Credential.findOne({token: token}); return query.exec(function (err, credential) { if (err) return null; return credential; }); The next step is to use this credent ...

javascriptnode.jsexpressmongoose

Is there a better method to determine the width when utilizing the jQuery UI resizable feature for improved efficiency?

I'm currently working on a website that features a resizable sidebar. I want the icons and text within the sidebar to shrink proportionally when the user resizes it. Right now, I have implemented an if statement to check if the sidebar's width fa ...

javascriptjqueryhtmlcssuser-interface

Keep a close eye on your Vue app to make sure it's

<template> <v-form :model='agency'> <v-layout row wrap> <v-flex xs12 sm12 lg12 > <v-layout row wrap> <v-flex xs12 md12 class="add-col-padding-right"> <v-radio-group v-mod ...

javascriptvue.js

Ways to determine if prototype methods vary

Is there a technique to verify if functions are distinct despite originating from the same prototype? I'm inquiring because I want to save functions in an array, and when attempting to delete one, it removes all functions due to sharing prototypes. ...

javascriptcomparisonprototype

How can I filter an array to retain only the initial 5 characters of every element?

I need help using the .map function to transform this array so that only the first 5 characters are displayed, like "01:00", "02:00"? This is the array: ["01:00:00 AM", "02:00:00 AM", "03:00:00 AM", "04:00:00 AM", "05:00:00 AM", "06:00:00 AM", "07:00:00 ...

javascript

I am unable to retrieve values from the req.body object in Node.js

Can anyone assist with node.js? I am having trouble accessing the values in my req.body object. Here is how it is populated: { '{ "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670a060e0b270f0814130906 ...

javascriptnode.jsexpressbody-parser

The Socket.io server running on Express is currently not reachable from any external devices

I currently have a basic application using socket.io and expressjs up and running. The application is hosting a simple HTML file, which I can successfully access through my browser. However, when attempting to access it from other devices on my network, th ...

javascriptexpresssocket.io

No image upload possible until 'submit' button is clicked

I'm attempting to send an mp3 file to the server using AJAX without the need for a submit button, but I'm facing an issue where the file isn't getting uploaded. Can anyone help me pinpoint the mistake in my code? <script> $(document). ...

javascriptphpjqueryajax

Display in Google Chrome without any dialogues

Hello friends, I am currently working on adding a print button to my website. I am testing it in Chrome and would like the page to be printed directly without showing any dialog boxes. However, I am facing some difficulties with this process. If anyone has ...

javascriptgoogle-chromevue.js

Retrieve information in JSON format using AngularJS by fetching data from SQL through PHP

My objective is to retrieve data from a mySql database using PHP, convert it to JSON, and then display it through AngularJS. Although I have successfully completed the steps leading up to this point, I am facing issues with the final step. Below are the de ...

javascriptphpmysqljsonangularjs

Top tips for utilizing CSS in a web component library to support various themes

Our team is currently in the process of developing a comprehensive design system that will be utilized across multiple projects for two distinct products. Each product operates with its own unique brand styleguide which utilizes design tokens, such as: Th ...

cssvue.jsfrontendvue-componentdesign-tokens

Using JQuery's appendTo method with a lengthy string of elements that includes a mix of single and double quotes: a step-by-step guide

My content script is fetching data from the server in the form of an array of objects. The structure looks something like this: [ { "lang": "English", "videos": [ { "embed": "<iframe width='100%' height='421px&apo ...

javascriptjquery

Utilizing Material UI Grid spacing in ReactJS

I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...

javascriptcssreactjsmaterial-ui

"Encountered an undefined error with the title property of this.state.project in the Wordpress API

I'm currently working on a project that involves a Backend Wordpress and a front-end React setup. However, I've encountered an issue when attempting to retrieve the title.rendered from the JSON Data. This error is displayed: TypeError: this.sta ...

javascriptjsonwordpressreactjsapi

Interceptors in axios do not trigger when making requests through a PHP proxy

I am currently working on a React app that will be interacting with services hosted on a remote server. During development on my local machine using the react-scripts server at localhost:3000, I disable CORS in the browser and have no issues with axios f ...

javascriptphpreactjsproxyaxios

Issue locating the bottom of the scroll bar

My attempt to detect when the scroll reaches the bottom of a div involves using this code: $('.scrollpane').scroll(function(){ if ($(this).scrollTop() + $(this).height() === $("#results").height()) { alert('scroll at bottom&a ...

javascriptjqueryscroll