如何将变量放在 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。