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

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

CodePudding user response：

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 >{{user.FullName}}</span>
    </li>
</ul>

CodePudding user response：

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>