Vus JS update text area once due to mutliplayer application

Question

I have a textarea I populate with information from a pouchdb / couchdb and I want this in the textarea field for editing purposes but what I don't want is this binding to carry on as changes are then stored in the database but to keep everyone connected and in sync the changes are listened for , which in turn means the field you are typing into tries to update, as I am bound to the same data and so you can literally type too fast and wipe out your writing, adding a lodash debounce helps you but as there are many people connected if another person is mid-typing when the changes are called, this will wipe out what they are typing, once you have 10 or more people connected its impossible to type.

using :value or v-model or .lazy do not work

Of course without setting anything on the textarea for value like v-model: everything works fine.. that is until you reload , because as there is no value to put into the textarea fields, the textarea's are now empty and typing into there will replace the pouchdb/couchdb data.

So what I believe I want to do is populate the textareas once on initial load or at a change of state and not have the bound in the normal way, but I cannot see a way to do this.## Heading ##

My hack head says I could populate a hidden input and try and copy and paste into the textarea field on load but this seems a little overkill and likely automating a copy and paste may look like a security issue and probably blocked by most browsers.

I also thought I could do a v-if statement to fill the textareas on load which works but of course as soon as you click into the box to edit and go to a v-else the text area clears.

This is quiet niche and specific and has many moving parts. Here is the textarea at the moment ,you can see it does some specific stuff to populate the right data into the right field.

 <div v-for="(value, index) in configPositions" v-bind:key="index">
        <vue-draggable-resizable
          class="innernode"
          v-if="nodeid == value.node_id && deleted == false"
          :w="value.width"
          :h="value.height"
          :x="value.x_pos"
          :y="value.y_pos"
          :z="value.z_index"
          :draggable="false"
          :resizable="false"
          style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
          :min-width="200"
          :min-height="220"
        >
          <form>
            <div v-if="value.read_mode == false">
              <div v-for="value in myNodes" v-bind:key="value.node_id">
                <textarea
                  v-if="nodeid == value.node_id"
                  @focus="editTrue(true)"
                  @blur="editTrue(false)"
                  v-model="value.node_text"
                  autofocus
                  @input="editNode"
                  :id="nodeid"
                  class="drag-cancel"
                  ref="nodetext"
                  placeholder="Idea goes here! (auto saved every keystroke)"
                ></textarea>
              </div>
            </div>
            <div v-if="value.read_mode == true">
              <p
                class="read"
                :id="nodeid"
                :inner-html.prop="nodetext | marked"
              ></p>
            </div>

            <!-- <h3>Reactions</h3> -->

            <div class="allemoji">
              <div
                class="eachemoji"
                v-for="(emojis, index) in configEmoji"
                :key="index"
              >
                <p v-if="nodeid == emojis.node_id">
                  {{ emojis.emoji_text }}
                </p>
              </div>
            </div>
            <p class="info">*markdown supported &amp; autosaves</p>
            <div class="btn-row">
              <!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
                >Delete</BaseButton
              > -->
              <div v-if="value.read_mode == true">
                <BaseButton
                  class="read"
                  buttonClass="action"
                  @click="readFlag()"
                  >Edit Mode
                </BaseButton>
              </div>
              <div v-else>
                <BaseButton
                  class="read"
                  buttonClass="action"
                  @click="readFlag()"
                  >Read Mode</BaseButton
                >
              </div>
            </div>
          </form>
        </vue-draggable-resizable>
      </div>

Answer 1

I popped the data into an array in created and used that non reactive stuff to populate the text area fields

  myArray: null,
    created() {
       //access the custom option using $options
      this.$options.myArray = this.myNodes
     },