Profile Toolbar

Simple Vue app for tracking changes to a profile toolbar

by Rob Cameron

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="app">
  <ul>
    <li>Following: {{ isFollowing }}</li>
    <li>Favorite: {{ isFavorited }}</li>
    <li>Lists: {{ isListed }}</li>
    <li>VouchedFor: {{ isVouchedFor }}</li>
    <li>HasNote: {{ hasNote }}</li>
  </ul>

  <button data-behavior="toggle-vouch">
    <span v-if="isVouchedFor">Remove Vouch</span>
    <span v-else>Add Vouch</span>
  </button>
</div>

JavaScript

app = new Vue({
  el: '#app',
  data: {
  	// ID of user viewing the page
    id:1,
    // IDs of users following this user
    following: [1,2,3],
		// IDs of users who have favorited this user
    favorites: [1,3,5],
    // IDs of lists the user is in
    lists:[4,5,6],
    // IDs of users vouching for this user
    vouches:[7,8,9],
    // IDs of users who have a note about this user
    notes:[1,5,9]
  },
  computed: {
  	isFollowing: function() {
    	return this.following.indexOf(this.id) != -1;
    },
    isFavorited: function() {
    	return this.favorites.indexOf(this.id) != -1;
    },
    isListed: function() {
    	return this.lists.indexOf(this.id) != -1;
    },
    isVouchedFor: function() {
    	return this.vouches.indexOf(this.id) != -1;
    },
    hasNote: function() {
    	return this.notes.indexOf(this.id) != -1;
    }
  }
});

// user vouches and the data structure is updated. response is the entire vouches structure so we just replace it.
toggleVouch = function() {
	$.post('/echo/json/', {
    json:JSON.stringify({
    	// toggles adding and removing 1 from the list of IDs
      vouches: [7,8,9,app.vouches.indexOf(app.id) == -1 ? 1 : null]
    })
  }, function(data) {
  	app.vouches = data.vouches
  });
}

// add event listener on Vouch button
$('[data-behavior~=toggle-vouch]').on('click', toggleVouch);