title: VueJs: Working with v-class
body: <p>I am trying to assign a css class to a span element, whenver it push the EDIT button. </p>
  
  <p>This is my <strong>working</strong> example in jsfiddle: </p>
  
  <p><a href="http://jsfiddle.net/r3nepL7u/" rel="nofollow">http://jsfiddle.net/r3nepL7u/</a></p>
  
  <p>BUT it only works, because I check if the title property of the edited object is equal to the title property of the todo object, instead I'd rather check if the two objects are equal.</p>
  
  <p>Unfortunately this breaks my code, whenever I have the same property (e.g. titles) but different objects.</p>
  
  <pre><code>&lt;td&gt; 
      &lt;span v-class="
          completed: todo.completed, 
          editing: editedTodo.title == todo.title"&gt;
          {{ todo.title }}
      &lt;/span&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Instead I would like to do something like this, where I check <strong>todo == editedTodo</strong></p>
  
  <pre><code>&lt;span v-class="
      completed: todo.completed, 
      editing: editedTodo == todo"&gt;
      {{ todo.title }}
  &lt;/span&gt;
  </code></pre>
  
  <p>Non Working Jsfiddle:
  <a href="http://jsfiddle.net/r3nepL7u/1/" rel="nofollow">http://jsfiddle.net/r3nepL7u/1/</a></p>
  
  <p>How do I check if <strong>todo</strong> is equal with <strong>editedTodo</strong>. AND is there a better way, to use the v-class directive, instead of using inline expressions, meaning for more complicated calculations?</p>
  
  <p>It seems to work fine in the todomvc example here:</p>
  
  <p>Line 23: <a href="https://github.com/yyx990803/vue/blob/dev/examples/todomvc/index.html" rel="nofollow">https://github.com/yyx990803/vue/blob/dev/examples/todomvc/index.html</a> </p>