Trying to Call a Method within Vue.js v-bind:src

Question

I'm trying to perform a "stripSemicolon" operation on a value within a v-for loop, but Vue is complaining that my string isn't defined anymore. It was before!

Any ideas??

My code looks like this...

        <ul id="userDropDown" v-if="users.length > 0 && selectedUserId == null">
            <li v-for="user in users" v-on:click="selectUser($event)">
                <span style="display:none;" v-bind:id="user.Id">{{user.Id}}</span>
                <img v-bind:src="stripSemi(user.ProfileImageURL)" width="75" height="75" style="border:1px solid black;border-radius:3px;"/>
                <span>{{user.UserName}}</span> &nbsp;|&nbsp;
                <span class="fullName">{{user.FullName}}</span>
            </li>
        </ul>

            stripSemi: function (s) {
                return s.substring(0, s.length - 1);
            }

It's saying s is undefined.

I'm getting values back from my server with the user array populated, and a single specific user with a ProfileImageURL value equal to "/Assets/Images/Alex-Mom-Laura_dc044526-8a8b-49ae-bb37-0864830cb849.jpg;".

So, I'm not sure why passing in the value to the stripSemi function, like so stripSemi(user.ProfileImageURL), is not working.

Thanks in advance.

Answer 1

Consider first processing the array returned from the API before passing it to v-for.

You can do this with a computed function:

computed: {
  fixedUsers: function() {
    return this.users.map(user => {
      user.ProfileImageURL = this.stripSemi(user.ProfileImageURL);
      return user;
    }
  }
},
methods: {
  stripSemi: function(s) {
    if (typeof s === 'string') {
       return s.replace(';', '');
    } else {
       return s;
    }
  }
}

Then in your component:

<ul id="userDropDown" v-if="users.length > 0 && selectedUserId == null">
    <li v-for="user in fixedUsers" v-on:click="selectUser($event)" :key="user.Id">
        <span style="display:none;" v-bind:id="user.Id">{{user.Id}}</span>
        <img v-bind:src="user.ProfileImageURL" width="75" height="75" style="border:1px solid black;border-radius:3px;"/>
        <span>{{user.UserName}}</span> &nbsp;|&nbsp;
        <span class="fullName">{{user.FullName}}</span>
    </li>
</ul>

Answer 2

Vue is complaining that my string isn't defined anymore - Please check if ProfileImageURL property exist in users array objects or not.

I created a snippet as per your code and it is working fine.

new Vue({
  el: '#app',
  data: {
    users: [{
      id: 1,
      ProfileImageURL: 'abc.png;'
    }, {
      id: 2,
      ProfileImageURL: 'def.png;'
    }]
  },
  methods: {
    stripSemi: function (s) {
      return s.substring(0, s.length - 1);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul id="userDropDown">
    <li v-for="user in users" :key="user.id">
      <img v-bind:src="stripSemi(user.ProfileImageURL)" width="75" height="75" style="border:1px solid black;border-radius:3px;"/>
    </li>
  </ul>
</div>