#vue.js #bootstrap-vue
Вопрос:
У меня есть столик:
lt;b-table striped hover :items="coursesArray" :fields="fields"gt;lt;/b-tablegt; Данные поступают из
coursesArray: [ { id: "1", name: "foo", teacherEmails: [{ 0: "sample1" }, { 1: "sample2" }, { 2: "sample3" }], teacherIds: ["A1", "A2", "A3"], }, ], А поля-это:
fields: [ { key: "id", label: "Course ID" }, { key: "name", label: "Course Name" }, { key: "teacherEmails", label: "Teacher Email", formatter: "teacherEmailTCellFormat", }, { key: "teacherIds", label: "Teacher ID" }, ], И вот как это визуализируется без форматирования.
Итак, я добавил пользовательский форматер в поля, чтобы удалить скобки и фигурные скобки.
Первая проблема, с которой я сталкиваюсь, заключается в том, что перебор значений для возврата всех элементов teacherEmails не работает.
teacherEmailTCellFormat(value) { console.log(value) value.forEach(item =gt; { return each[0] } } Вторая проблема, которую я не понимаю, почему это происходит, заключается в том, что если я регистрирую значение, переданное в форматер, становится ясно, что функция форматера вызывается дважды.
Любая помощь или разрешение будут оценены по достоинству.
Ответ №1:
Вам нужно вернуть массив, вы можете сделать это с помощью Array#map :
new Vue({ el:"#app", data: () =gt; ({ fields: [ { key: "id", label: "Course ID" }, { key: "name", label: "Course Name" }, { key: "teacherEmails", label: "Teacher Email", formatter: "teacherEmailTCellFormat" }, { key: "teacherIds", label: "Teacher ID" }, ], coursesArray: [ { id: "1", name: "foo", teacherEmails: [{ 0: "sample1" }, { 1: "sample2" }, { 2: "sample3" }], teacherIds: ["A1", "A2", "A3"], } ] }), methods: { teacherEmailTCellFormat(value) { return value.map((item, i) =gt; item[i]); } } }); lt;link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/gt; lt;link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/gt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"gt;lt;/scriptgt; lt;div id="app"gt; lt;b-table striped hover :items="coursesArray" :fields="fields"gt;lt;/b-tablegt; lt;/divgt; Примечание: Я предположил, что ключ представляет индекс элемента в массиве, но вы можете изменить отображение по своему усмотрению. Главной проблемой было возвращение массива.
Комментарии:
1. Это помогло, спасибо. Немного изменил форматирование, чтобы отобразить его без скобок, как это:
let arr = value.map((item, i) =gt; item[i]); return arr.toString();2. Но есть какие-нибудь идеи, почему форматер вызывается дважды? Это просто из любопытства.
3. Не уверен, что это было бы что-то внутреннее, использующее обратный вызов дважды.