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.
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/
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>