x-model inside x-if

[Robbuss]

Hello,

I have an object called editing. It is initialized as null, and set to a specific object from a loop to edit that object.
The issue I have is that when I use:

<template x-if="editing">
    <input x-bind:value="editing ? editing.name : ''" @input="(e) => editing.name = e.target.value"  />
    <button @click="editing = null"><!-- a function that makes a call and then sets editing = null -->
</template>

I get an error in console: editing.name of undefined.
However, with the following code, this does not error:

<template x-if="editing">
   <input x-bind:value="editing ? editing.name : ''" @input="(e) => editing.name = e.target.value"  />
   <button @click="editing = null">
</template>

It seems to me like the as soon as the editing gets set to null, the x-model is still active before the template is removed from the dom. Any insights on this?

Thanks!

[KevinBatdorf]

What if you wrap the <template> inner content with a div?

<template>
  <div>
    <!-- Anything in here -->
  </div>
</template>