如何解决vuejs3 - 从 v-model 更新计算值
我正在使用 vue-3
我不熟悉 vuejs,我是一个新手开发者。
情况
为了在 Salesforce 上批量添加翻译,我想编写一个工具。 我用 rust 编写了一个网络服务,它获取一个 json 并将其转换为 zip 以供 salesforce 使用。
客户端为我提供了电子表格中的数据,我必须将其格式化为 json 才能将其发送到我的 webervice。 我想允许在单元格中复制/粘贴,然后用“\ n”分割每一行,我链接到输入以便在必要时编辑条目。
问题
输入很好地填充了分割值,但如果我更改输入,“计算”中的值不会更新。 see image here
问题
如何使用拆分值更新计算数组中的值? V-model 根据计算更新我的输入,而不是相反。 执行此操作的最佳功能是什么? 我看到有反应,但我不知道这是否是正确的解决方案。
这是我的代码
<template>
<div>
<label for="fr">fr</label>
<input type="checkBox" value="fr" id="fr" v-model="fr.state" />
<label for="en">en</label>
<input type="checkBox" value="en" id="en" v-model="en.state" />
<label for="it">it</label>
<input type="checkBox" value="it" id="it" v-model="it.state" />
<label for="es">es</label>
<input type="checkBox" value="es" id="es" v-model="es.state" />
<label for="german">german</label>
<input type="checkBox" value="german" id="german" v-model="german.state" />
</div>
{{ formated.fr }}
<div class="Array">
<table>
<thead>
<tr>
<th>The table header</th>
<th>default Value</th>
<th v-if="fr.state === true">fr</th>
<th v-if="en.state === true">en</th>
<th v-if="it.state === true">it</th>
<th v-if="es.state === true">es</th>
<th v-if="german.state === true">german</th>
</tr>
</thead>
<tbody>
<tr>
<td>C/C</td>
<td><textarea v-model="defaultentry" cols="40" /></td>
<td v-if="fr.state === true"><textarea v-model="fr.value" cols="40" /></td>
<td v-if="en.state === true"><textarea v-model="en.value" cols="40" /></td>
<td v-if="it.state === true"><textarea v-model="it.value" cols="40" /></td>
<td v-if="es.state === true"><textarea v-model="es.value" cols="40" /></td>
<td v-if="german.state === true">
<textarea v-model="german.value" cols="40" />
</td>
</tr>
<tr v-for="(entry,index) in formated.default" :key="index">
<td v-if="formated.default[index]">{{ index }}</td>
<td v-if="formated.default[index]">
<input type="text" v-model="formated.default[index]" />
</td>
<td v-if="formated.fr">
<input type="text" v-model="formated.fr[index]" />
</td>
<td v-if="formated.en">
<input type="text" v-model="formated.en[index]" />
</td>
<td v-if="formated.it">
<input type="text" v-model="formated.it[index]" />
</td>
<td v-if="formated.es">
<input type="text" v-model="formated.es[index]" />
</td>
<td v-if="formated.german">
<input type="text" v-model="formated.german[index]" />
</td>
</tr>
</tbody>
</table>
</div>
<script>
export default {
name: "Array",entries: {},data() {
return {
defaultentry: [],fr: { state: false,value: [] },en: { state: false,it: { state: false,es: { state: false,german: { state: false,};
},computed: {
formated: function() {
let entries = {};
let base = this.defaultentry
.toString()
.split("\n")
.map((x) => {
if (x.length > 40) {
return "error";
}
return x.trim();
});
let fr = this.fr.value
.toString()
.split("\n")
.map((x) => {
if (x.length > 40) {
return "error";
}
return x.trim();
});
let en = this.en.value
.toString()
.split("\n")
.map((x) => {
if (x.length > 40) {
return "error";
}
return x.trim();
});
let it = this.it.value
.toString()
.split("\n")
.map((x) => {
if (x.length > 40) {
return "error";
}
return x.trim();
});
let es = this.es.value
.toString()
.split("\n")
.map((x) => {
if (x.length > 40) {
return "error";
}
return x.trim();
});
let german = this.german.value
.toString()
.split("\n")
.map((x) => {
if (x.length > 40) {
return "error";
}
return x.trim();
});
entries.default = base;
if (this.fr.state == true) {
entries.fr = fr;
} else {
delete entries.fr;
}
if (this.en.state == true) {
entries.en = en;
} else {
delete entries.en;
}
if (this.it.state == true) {
entries.it = it;
} else {
delete entries.it;
}
if (this.es.state == true) {
entries.es = es;
} else {
delete entries.es;
}
if (this.german.state == true) {
entries.german = german;
} else {
delete entries.german;
}
return entries;
},},};
</script>
感谢您的时间和帮助
解决方法
v-model
是双向的,所以它需要获取和设置一些东西。您只定义了 get
计算属性,但未定义 set
。您可以像使用数据属性一样使用 formated
。
因此在 get()
和 set()
方法中拆分计算属性使此工作有效。
请参阅 the documentation 了解其工作原理。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。