How to replace a slash in vue.js-CodePudding

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.

CodePudding user response：

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/

CodePudding user response：

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>