vuejs3 - 从 v-model 更新计算值

Question

我正在使用 vue-3

本人对vuejs不熟悉，开发新手

情况

为了在 salesforce 上批量添加翻译，我想编写一个工具。我用 rust 编写了一个 web 服务，它得到一个 json 并将其转换为 salesforce 的 zip。

客户端向我提供了电子表格中的数据，我必须将其格式化为 json 才能将其发送到我的网络服务。我想允许在一个单元格中进行复制/粘贴，然后将每一行与我 link 的“\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, 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>

感谢您的宝贵时间和帮助

Answer 1

v-model 双向工作，所以它需要得到一些东西并设置一些东西。您只定义了 get 计算属性而不是 set。你使用 formated 就像它是一个数据属性.

所以将计算的属性拆分为 get() 和 set() 方法使这项工作。

请参阅 the documentation 了解其工作原理。

vuejs3 - 从 v-model 更新计算值

vuejs3 - update computed value from v-model

javascript

salesforce

vue.js