Update a Value the Template is depending on

Hi,

I’m wondering about the best approach on updating a value on which the template is rendered and depending on.

Example:

<div v-for="field in fields">
	<input v-model="field.name" />
	<textarea v-model="post[field.name]" />
</div>

So upon a change in field.name, vue obviously throws an error because post[field.name] is not defined anymore.
I was thinking about making a copy of fields and let the input edit that and the textarea depend on the “original”, but that seems complicated because you would need to keep them in sync all the time.

Is there a better solution?

This seems to be related: Any better way than v-if to render content that is temporarily undefined?

I found that using a 1-way binding (using :value) is the first step to go. Other than that, it still throws errors, becaue post[field.name] is temporarily undefined.

<div v-if="fields" v-for="field in fields">
	<input v-model="field.name" />
	<textarea v-model="post[field.name]" />
</div>
<div v-else class="preloader"></div>

Block will not be rendered and there will be no errors for the time when value is undefined, if you depend on value inside field you can do similarly:

<div v-for="field in fields">
	<input v-if="field.name" v-model="field.name" />
	<textarea v-if="post[field.name]" v-model="post[field.name]" />
</div>

Edit: oh, sorry, didn’t notice that this is covered in a linked question, as far as I know the only other way is to bind your own handlers and check field existance there:

<div v-for="field in fields">
	<input @change="(event) => checkField(event, field)"  :value="field.name"/>
	<textarea v-model="post[field.name]" />
</div>

and inside component method

checkField(event, field){
  if(!field.name) return;
  field.name = event.target.value;
}