title: Can you change an item's ID in vue.js?
body: <p>I have a list of items, contained within a javascript array. Similar to the examples found on <a href="https://v2.vuejs.org/v2/guide/transitions.html#List-Entering-Leaving-Transitions" rel="nofollow noreferrer">the vue.js documentation</a>.</p>
  <p>This is the workflow I'm struggling with:</p>
  <ul>
  <li>A user clicks &quot;Add&quot;.</li>
  <li>I immediately add an item to the list (in the spot where they asked it to be)</li>
  <li>I send an ajax request to the server to create the item.</li>
  <li>The call returns with the database row for the new item.</li>
  </ul>
  <p>I'm using the database primary key as my vue key - which I have no way of knowing up to the point the ajax call finally gets back to me. But if I simply update the ID on the object, I end up with that row transitioning out and then back in.</p>
  <p>Is there a way to tell vue that I'm changing the ID of an item?</p>
  <p>My ideal case would be something along the lines of:</p>
  <pre><code>click: function () {
      let item = {
          id: &quot;placeholder id, possibly randomly generated&quot;
      }
      this.array.splice(index, 0, item);
      ajax_call().complete(function (new_id) {
          // item = data.new_id
          vue.update_id_for_object(item, data.new_id)
      })
  }
  </code></pre>
  <p>The commented out line is the one that causes the undesired transition.</p>
  <p>Someone voted to close this as a duplicate of <a href="https://stackoverflow.com/questions/35374512/changing-an-elements-id-with-vue-js">this question</a> - as far as I can tell, it's talking about how to set ids dynamically which I'm already doing in my example. Feel free to clarify how it helps my issue though.</p>