[Vuejs]-Vuejs Filter String Replace

by

1👍

✅

That would depend on how you want to decode the URI component. If this media data is populated dynamically (I suppose so), you could make a method for parsing and decoding it (see example below). If you need this decoder as a filter, however, here’s an excerpt from the docs:

Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol.

So your best bet is probably to use a computed property so you can “pipe” it. And yes, you could utilize the native method decodeURIComponent() for this exact purpose.

Approach #1: Method only

new Vue({
  el: '#app',

  data() {
    return {
      rootPath: '/public/images/',

      media: {
        client: {
          name: 'Music%20file%20with%20spaces',
          id: 123
        },
        type: 'music-file',
        fileName: 'some_music',
        ext: 'mp3'
      }
    }
  },

  methods: {
    getImgSource(media) {
      // Destructures the properties for improved readability.
      const { client, type, fileName, ext } = media;
      const { name, id } = client;
      
      // Uses template literals. Particularly useful for this situation
      // where you have several, unique delimiters.
      // Helps you see clearer how each of these URI components is combined.
      return `${this.rootPath}${decodeURIComponent(name)}_${id}/${type}/${fileName}.${ext}`;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- Commented out for demo purposes, because I don't have the file.
  <img :src="getImgSource(media)" :alt="media.fileName" /> -->
  
  <!-- Let's assume this is an image element -->
  <div v-text="getImgSource(media)"></div>
</div>

Approach #2: Computed property + filter

new Vue({
  el: '#app',

  data() {
    return {
      rootPath: '/public/images/',

      media: {
        client: {
          name: 'Music%20file%20with%20spaces',
          id: 123
        },
        type: 'music-file',
        fileName: 'some_music',
        ext: 'mp3'
      }
    }
  },

  computed: {
    mediaFile() {
      const { client, type, fileName, ext } = this.media;
      const { name, id } = client;
      
      return `${this.rootPath}${name}_${id}/${type}/${fileName}.${ext}`;
    }
  },
  
  filters: {
    decodeName: window.decodeURIComponent
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- Let's assume this is an image element -->
  <div>{{ mediaFile | decodeName }}</div>
</div>

Hope that helps.

👤Yom T.

2👍

You can make method which will return prepared url computed method like this: 

imageUrl(media){
  return '/public/images/' + media.client.name.replace("%20", " ") + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext;
}

Or if media is assigned in data you can use computed method which will return you same url 

computed: {
 imageUrl(){
  return '/public/images/' + this.media.client.name.replace("%20", " ") + '_' + this.media.client.id + '/' + this.media.type + '/' + this.media.fileName + '.' + media.ext;
 }
}
👤Bond77

Leave a comment