Removing the last two characters from a number with a forward slash in Vue.js

I'm encountering a slight issue with my code:

<template slot="popover">
  <img :src="'img/articles/' + item.id + '_1.jpg'">
</template>

Some of the item.id numbers (Example: 002917/1) contain a slash, causing some images not to display. I would like to remove the last two characters when there is a slash in the number. Is there an easy solution for this?

The deletion of the slash should only occur at this specific point in the code and not where else the item.id is utilized.

I am fairly new to vue and javascript, so please be gentle.

I am using vue version 16.13.1

javascriptvue.js

Answer №1

Another option is to utilize the split method. This approach guarantees the correct output, even in cases where the ID does not contain a slash.

<template slot="popover">
  <img :src="'img/articles/' + item.id.split('/')[0] + '_1.jpg'">
</template>

Answer №2

If you want to extract a portion of a string in JavaScript, you can make use of the slice method like this:

const code = "002917/1";
const extractedCode = code.includes("/") 
                ? code.slice(0, -2) 
                : code;
console.log(extractedCode);

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

What is the best method for removing a class with JavaScript?

I have a situation where I need to remove the "inactive" class from a div when it is clicked. I have tried various solutions, but none seem to work. Below is an example of my HTML code with multiple divs: <ul class="job-tile"> <li><div ...

javascriptjqueryhtml

Different or improved strategy for conditional rendering in Angular

Hey there! I've got a few *NgIf conditions in my template that determine which components (different types of forms) are displayed/rendered. For example, in one of my functions (shown below) private _onClick(cell:any){ this._enableView = fals ...

javascriptangulartypescript

Discovering a solution to extract a value from an Array of objects without explicitly referencing the key has proven to be quite challenging, as my extensive online research has failed to yield any similar or closely related problems

So I had this specific constant value const uniqueObjArr = [ { asdfgfjhjkl:"example 123" }, { qwertyuiop:"example 456" }, { zxcvbnmqwerty:"example 678" }, ] I aim to retrieve the ...

javascriptreactjstypescript

Tips for integrating custom code into your Angular cli service worker

Although I have successfully generated and configured the service worker using a config file generated by Angular CLI, I am struggling to find documentation on how to add custom code to the ngsw-worker.js file. I want to include functions such as push no ...

javascriptangularangular-cliservice-worker

Passing a PHP array to a JavaScript function using a button click event in an HTML form

It seems there was some confusion in my approach. I'm working with a datatable that has an edit button at the end. Clicking on this button opens a modal, and I want to pass the data from the table to the modal. While I can send it as a single variabl ...

javascriptphphtmlarraysbootstrap-modal

Issue with setting a cookie on a separate domain using Express and React

My backend is hosted on a server, such as backend.vercel.app, and my frontend is on another server, like frontend.vercel.app. When a user makes a request to the /login route, I set the cookie using the following code: const setCookie = (req, res, token) = ...

javascriptnode.jsreactjsexpressaxios

Managing multiple promises with multiple steps

I am looking to extract information from various sources. Once each dataset is obtained, I want to send it to a separate asynchronous processor such as a worker thread. After all processes are complete, I aim to combine the data and deliver it. Here is an ...

javascriptasynchronouspromise

Unusual behavior observed during the selection of a random number within a specified range

When a user inputs a range, let's say 3-5, the script should generate a random integer within that range. Initially, the code functions correctly. length = Math.floor(Math.random() * (5 - 3 + 1)) + 3; However, when I try to extract the values progra ...

javascript

Troubleshooting issue with Django forms and JavaScript interactions

For the past day, I've been grappling with a particular issue and haven't made much progress. My setup involves using a django inline form-set, which displays all previously saved forms along with an additional empty form. To show or hide these f ...

javascriptjquerydjangovalidationdjango-forms

Having trouble retrieving a remote JSON link from a local HTML file in Google Chrome

Having trouble fetching a JSON from the following link: [https://www.nseindia.com/api/equity-stockIndices?index=NIFTY%2050]. When accessed through a browser, the JSON is displayed on screen as expected. However, attempting to fetch this link from JavaScrip ...

javascriptnode.jsfetch-api

Begin the NextJS project by redirecting the user to the Auth0 page without delay

I am new to coding and currently working on a project using Typescript/NextJS with Auth0 integration. The current setup navigates users to a page with a login button that redirects them to the Auth0 authentication page. However, this extra step is unneces ...

javascriptreactjstypescriptnext.jsauth0

Tips for eliminating the page URL when printing a page using window.print() in JavaScript or Angular 4

Can someone help me with a function that uses window.print() to print the current page, but I need to remove the page URL when printing? I'm looking to exclude the URL from being printed and here is the code snippet where I want to make this adjustme ...

javascripthtmlangular

Issue with IE7 Dropdownlist not appearing after changing class name when onFocus event is triggered for the first time

I need to adjust the CSS class of a dropdownlist when it is focused on, in order to change its background color. However, in IE7, when the dropdownlist is clicked, the CSS class changes but the options list does not appear until the dropdownlist is clicke ...

c#javascriptasp.netinternet-explorer-7

Clicking the load more button fails to retrieve any additional content

Recently, I implemented a "load more" button on my website's front page. The idea is for this button to load additional posts after every 15 posts. Despite having all the necessary code in place, clicking the button does not trigger any posts to load. ...

javascriptphpjqueryhtmlajax

There seems to be an issue with the VueJs + ElementUi Change method as it is

Just starting out with Vue and Element UI. I'm attempting to create a custom component using the ElementUI autocomplete/select feature. The problem I am facing is that the @change method does not contain a event.target.value value. When I try to acc ...

javascriptvue.jsvuejs2element-ui

Dragend event for images does not trigger in webkit when using TinyMCE

When using the TinyMCE editor, I tried binding the dragend event on images with the following code: _imagePlugin.editor.dom.bind(_imagePlugin.editor.dom.select('img'), 'dragend', function(){console.log('aaaa');}); Oddly enou ...

javascriptjquerywebkittinymce

Understanding the performance of video in threejs when using getImageData

Edit; Check out the working codepen (you'll need to provide a video file to avoid cross-origin policy) https://codepen.io/bw1984/pen/pezOXm I'm currently trying to adapt the amazing rutt etra example from to utilize video (using threejs), but ...

javascriptperformancethree.jshtml5-videogetimagedata

Is there a way to access the precise Accessibility Tree or Accessibility Object Model (AOM) generated by Chrome using Playwright/Selenium?

Every browser, including Google Chrome, analyzes the DOM and generates an Accessibility Tree (AT) that displays only interactive and descriptive elements (e.g. <input>, <button> as interactive, <span>, <label> as descriptive along w ...

javascriptgoogle-chromeaccessibilityplaywrightuiaccessibility

Unable to identify the element ID for the jQuery append operation

After attempting to dynamically append a textarea to a div using jQuery, I encountered an issue. Despite the code appearing to work fine, there seems to be a problem when trying to retrieve the width of the textarea using its id, as it returns null. This s ...

javascriptjqueryappend

The extension's script initiates without waiting for the entire page to finish loading

Recently, I have embarked on developing a chrome extension that requires waiting for a YouTube page to fully load before inserting a button into the existing code. Despite using getElementById() to locate the element, the script often completes execution b ...

javascripthtmlgoogle-chrome-extension