How to replace a slash in vue.js

Question

I have a little problem with my code:

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

Some of my item.id numbers have a slash in them. As a result, some images are not displayed. Now I would like to replace the slash with an underline or delete it, if a slash occurs in the item.id numbers. Is there a simple solution for this?

The slash should only be replaced at this point in the code and not in another place where the item.id is used.

use a function to handle this inside like: <img :src="'img/articles/' + handleSlash(item.id) + '_1.jpg'"> — Woohaik
– Woohaik, Commented Dec 10, 2021 at 11:42

Pochwar · Accepted Answer · 2021-12-10 13:07:36Z

5

you can use a computed property and replace slashes by dashes with replace and a regex:

<template slot="popover">
  <img :src="`img/articles/${itemId}_1.jpg`">
</template>

<script>
...
  computed: {
    itemId: function(){
        return this.item.replace(/\//g, '-');
    }
  }
...
</script>

here's a test fiddle : https://jsfiddle.net/pqfvba6n/

edited Dec 10, 2021 at 13:07

answered Dec 10, 2021 at 12:22

Pochwar

7566 silver badges20 bronze badges

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

2 Comments

Pochwar Over a year ago

I use dashes in my example, but you can use any other character like underscores like this this.item.replace(/\//g, '_') or remove slashes like this this.item.replace(/\//g, '')

Pochwar Over a year ago

I use :src="`img/articles/${itemId}_1.jpg`" instead of :src="'img/articles/' + itemId + '_1.jpg'" because I found it cleaner, but you can keep your version

eselskas · Accepted Answer · 2021-12-10 13:02:52Z

0

Use replace (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)

<template slot="popover">
  <img :src="'img/articles/' + item.id.replace(/\//g, '_') + '_1.jpg'">
</template>

edited Dec 10, 2021 at 13:02

answered Dec 10, 2021 at 12:31

eselskas

8278 silver badges19 bronze badges

2 Comments

Pochwar Over a year ago

if there are many slashes, it will only replace the first, that's why I use a regex with g flag

eselskas Over a year ago

The question mentions "slash" not "slashes", so should be covered with .replace("/", "_") Although i did edit my answer to use regex, thanks

Collectives™ on Stack Overflow

How to replace a slash in vue.js

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related