由于mutliplayer应用程序，Vus JS一次更新了文本区域

问题描述

我有一个textarea，我用pouchdb / couchdb中的信息填充，我希望在textarea字段中进行编辑，但我不希望此绑定继续进行，因为更改随后存储在数据库中，但是保持每个人的连接并同步，监听更改，这又意味着您要输入的字段会尝试更新，因为我绑定了相同的数据，因此您可能打字得太快并抹掉了文字，添加了lodash debounce可以为您提供帮助，但是如果有其他人在键入更改时正在打字，则有很多人处于连接状态，一旦您有10个人或更多人连接，则键入的内容将消失。

使用：value或v-model或.lazy无效

当然，无需在文本区域上设置任何值，例如v-model：一切正常，直到重新加载为止，因为在textarea字段中没有值可输入，因此textarea的内容为空并输入那里将替换pouchdb / couchdb数据。

所以我认为我想做的是在初始加载或状态更改时填充一次textarea，并且没有以常规方式进行绑定，但是我看不到这样做的方法。##标题##

我的黑客头说，我可以填充隐藏的输入，然后尝试在加载时将其复制并粘贴到textarea字段中，但这似乎有点过大，并且自动执行复制和粘贴可能看起来像是一个安全问题，并且可能被大多数浏览器阻止

我还认为我可以做一个v-if语句来填充加载的文本区域，该语句可以工作，但是当然，只要您单击该框进行编辑并转到一个v-else，文本区域就会清除。

这是安静的利基市场，具有特定性，并具有许多活动部分。这是当前的文本区域，您可以看到它在将正确的数据填充到正确的字段中做了一些特定的工作。

 <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>

解决方法

我将数据弹出到创建的数组中，并使用该非反应性内容填充文本区域字段

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