Vus JS由于多层应用程序而更新文本区域一次

Question

我有一个文本区域，我用pouchdb/couchdb中的信息填充，我希望在文本区域字段中进行编辑，但我不希望这种绑定在更改存储在数据库中时继续进行，但为了保持每个人的连接和同步，会监听更改，这反过来意味着你输入的字段会尝试更新，由于我被绑定到相同的数据，因此你可能会打字太快，从而删除你的文字，添加lodash debounce有助于你，但由于有很多人连接，如果在调用更改时另一个人正在打字，这将删除他们正在键入的内容，一旦你有10个或更多人连接，就不可能打字。

使用：value或v-model或.layed不工作

当然，不需要在文本区域设置任何类似v-model的值：一切都很好。。在重新加载之前，因为没有值可以放入textarea字段，所以textarea现在是空的，在那里键入将替换pouchdb/couchdb数据。

因此，我认为我想做的是在初始加载或状态更改时填充文本区域，而不是以正常方式进行绑定，但我看不到实现这一点的方法。##标题##

我的黑客主管说，我可以填充一个隐藏的输入，并尝试在加载时复制粘贴到文本区域字段，但这似乎有点过头了，自动化复制粘贴可能看起来像是一个安全问题，可能会被大多数浏览器阻止。

我还想我可以做一个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>

Answer 1

我在created中将数据弹出到一个数组中，并使用非反应性的东西填充文本区域字段

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