![](/img/trans.png)
[英]How to precheck VueJs3 checkboxes if their value is in an array at page creation while v-model used on the input?
[英]vuejs3 - update computed value from v-model
我正在使用 vue-3
我對 vuejs 不熟悉,我是新手開發人員。
情況
為了在 salesforce 上批量添加翻譯,我想編寫一個工具。 我在 rust 中編寫了一個 web 服務,它獲取一個 json 並將其轉換為 zip 以供銷售人員使用。
客戶端為我提供了電子表格中的數據,我必須將其格式化為 json 以將其發送到我的 webervice。 我想允許在單元格中復制/粘貼,然后用鏈接到輸入的“\ n”分割每一行,以便在必要時編輯條目。
問題
輸入很好地填充了拆分值,但如果我更改輸入,“計算”中的值不會更新。 在這里看圖片
問題
如何使用拆分值更新計算數組中的值? 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, value: [] },
it: { state: false, value: [] },
es: { state: false, value: [] },
german: { state: false, value: [] },
};
},
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()
方法即可完成這項工作。
請參閱有關其工作原理的文檔。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.