如何将变量放在 JavaScript 文件中的 v-data-table 的标题部分？

Question

我正在 Vue.js 中使用数据表开发一个应用程序，我需要显示 v-data-table 组件的标题，但我需要（如果可能）传递一个变量，该变量可以随页面语言而改变.这是我显示标题的部分代码    headers: [    { text: "Name", sortable: true, value: "name" },    { text: "Lastname", sortable: true, value: "last_name" },    { text: "Email", sortable: true, value: "email" },    { text: "Role", sortable: true, value: "roles[0].name" },    { text: "Actions", sortable: false, align: "center" }  ],我在另一个包含变量的目录中有一个 JavaScript 文件，我将它导入到我的脚本部分，如下所示： import message from "../../lang/index.js";如何在text标题字段中包含我需要的变量？

Answer 1

您可以使用两种访问器访问对象（导入或本地）的属性：点表示法和括号表示法。下面的 Mozilla 文档清楚地解释了它们。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

在访问对象内部的属性时，括号表示法提供了更多的自由。

假设您有一个带有语言选择器下拉列表和数据表的 Vue 组件。

你的data块看起来像这样：

data() {

    return {

        language: "en",

        languageOptions: ["en", "es"],

        headers: [

            { text: "Name", sortable: true, value: "name" },

            { text: "Lastname", sortable: true, value: "last_name" },

            { text: "Email", sortable: true, value: "email" },

            { text: "Role", sortable: true, value: "roles[0].name" },

            { text: "Actions", sortable: false, align: "center" }

        ],

    }

}

对于您的messages.js文件：

export default {

    en: {

        name: "Name",

        lastName: "Last Name",

        role: "Role",

        email: "Email",

        actions: "Actions"

    },

    es: {

        name: "Nombre",

        number: "Numero",

        role: "El Oficio"

        email: "Email",

        actions: "Acción"

    }

}

用来自相应语言选项的值替换标题文本

messages[language][fieldName]:

修改后的代码：

data() {

    return {

        language: "en",

        languageOptions: ["en", "es"],

        headers: [

            { text: messages[language]["name"], sortable: true, value: "name" },

            { text: messages[language]["lastName"], sortable: true, value: "last_name" },

            { text: messages[language]["email"], sortable: true, value: "email" },

            { text: messages[language]["role"], sortable: true, value: "roles[0].name" },

            { text: messages[language]["actions"], sortable: false, align: "center" }

        ],

    }

}

我还建议查看 Vue 的本地化插件vue-i18n。