vue does not recover from me specifying a non existing location for v-model-CodePudding

When I have a textarea like

<textarea v-model="foo.abc.text"></textarea>

and either foo or foo.abc does not exist yet then vue removes either parts of the DOM or is giving me a blank page.

It does never recover.

That alone is annoying, regardless of if I am using a debug version of vue or not.

If I try to use an approach that I have been advised to use earlier like

<textarea v-model="foo?.abc?.text"></textarea>

then I am still out of luck, I presume that I get a "rvalue" using those question marks and what I need rather is a variable location.

How do I, with as little trickery as possible, allow v-model to exist later on even if it doesnt exist now (late binding)?

CodePudding user response：

Just shape your data accordingly and initialize it with empty values:

data(){
  return {
    foo: {
      abc: {
        text: ''
      }
    }
  }
}

You can later populate it e.g. with the result of api call, but it's still better to initialize data properly

CodePudding user response：

I would suggest going the :value @input way. It allow more control over the input model, and does not require hiding it.

<textarea :value="!!foo && foo.abc.text" @input="(val) => !!foo && (foo.abc.text = val)" />

You can even hook in a validator:

<textarea 
    :value="!!foo && foo.abc.text" 
    @input="(val) => !!foo && (foo.abc.text = val)" 
    :rules="v => !v && 'The object has not been initialised'"
/>

CodePudding user response：

I found a solution I can live with and then I got a comment in the same direction:

Conditionally showing the textarea.

v-if seems to do it but it falls under the "trickery" category, I think (angularjs would be more relaxed).

<textarea v-if="foo!=null" v-model="foo.abc"></textarea>

The symptom to hiding components if something is not all correct is not the best part of vue.js. Better show them and color them red.