Вопросы и ответы - v-for

Фильтр VueJS для v-for to v-if

У меня есть следующий фильтр computed: { ...mapState({ myNodes: (state) => state.myNodes, configPositions: (state) => state.configPositions, configEmoji: (state) => state.configEmoji, }), nodes_filtered: function () { return this.myNodes.filter((nodes) => { return nodes.deleted == false }) }, emojis_filtered() { retur...

Проблема с отображением конкретных данных в цикле v-for

Я пытаюсь создать divs с определенными значениями, полученными от геттера в файле ts. Я использую Vue.js filters: filters, // e.g. [ // 0: {filter: "filter1"} // 1: {filter: "filter2"} // 2: {filter: "filter3"} // 3: {filter: "filter4"} // ] values: values, // e.g. [ // 0: {value: &quo...

Vue - v-for с изменяющимися значениями

Шаблон: <template> <nav> <router-link :to="key" v-for="(value, key) in state.menu" :key="key">{{value}} | </router-link> </nav> </template> Код: export default { setup() { const menu = ['home', 'news', 'about']; const state = reactive({ menu: {} }); menu.map(item => { state.menu[item] = ...

Как использовать карту массива внутри цикла v-for в Vue?

Я пытаюсь понять, как заставить цикл работать внутри другого цикла в Vue. Задача кажется тривиальной при работе с React, но на самом деле я не понимаю, как я могу использовать стандартный Хук при работе с массивами внутри шаблона/JSX. По условию входные данные поступают с сервера в заданном формате. На данный момент код в прилагаемом фрагменте ниже не работает из-за синтаксических ошибок. Можете л...

Вычисляемое свойство или другой способ изменения стиля в зависимости от значения внутри v-for in Vue

У меня есть такой компонент: Vue.component('mcp-item', { template: '#mcp-item-template', data() { return { name: "MCP v2", version: "2.0", imei: 'XXXXXX XX XXXXXX X', relays: [ { name : "REL1", state : 0 }, { name : "REL2", state : 0 } ], i...

Как зациклить только один раз дубликаты данных с помощью v-for?

Я получаю данные из облака. Я просмотрел много вопросов в StackOverflow, но все они использовали данные в data(). Я супер новичок в использовании Vue.js, поэтому не смог применить его в своем коде. Я хотел бы отобразить дубликаты данных только один раз в v-for. В этом случае {{item.matched_product.name}} отображается повторно. <template slot-scope="scope"> <div v-if="sco...

изображения не могут быть отображены с помощью v-bind в цикле v-for

Я знаю, что есть много вопросов и ответов о том, как использовать v-bind в v-for для привязки к img src ... однако я потратил целый день на тщетные эксперименты. Прошу прощения за дублирующий вопрос, но не мог бы кто-нибудь мне помочь? Я использую vue@2.6.12 и @vue/cli 4.5.6. Я пытаюсь показать несколько изображений в цикле v-for, привязывая пути к файлам к img src. У меня есть данные о навыках в ...

Как указать индекс массива в v-for В vuejs?

У меня есть массив цветов в моем состоянии vuex, и в моем компоненте я хочу указать каждый цвет для каждого элемента, который приходит из v-for. // state state: { APIData: { userInfo: {}, allClasses: [ { subject: 'subject1', ... }, { subject: 'subject2', ... }, { subject: 'subject3', ...

Как я могу указать начальное значение для диапазона при использовании директивы v-for в Vue.js v2. x?

Я работаю над распечаткой номеров страниц, на которые пользователь может нажать для компонента пейджера. Vue.js. Я вижу, что документы ясно говорят, что v-for можно использовать для диапазона: в-ДЛЯ можно также воспользоваться целым числом. В этом случае он будет повторять шаблон столько раз. <div> <span v-for="n in 10">{{ n }} </span> </div> Результат: 1 2 3 4...

Вложенные циклы v-for с использованием тега p не работают в Vue.js

Я хочу вложить 2 v-образных петли. Это должно быть довольно просто, но это не работает, и я понятия не имею, почему. Когда я просматриваю пользователей и показываю их имена, это работает нормально. Когда я беру первый элемент из массива сеансов и отображаю его имя, это тоже работает нормально. Однако, когда я хочу циклически перебирать массив сеансов во вложенном цикле v-for, массив кажется пустым...

:Key on v-for To rerender a row in the list | / составные значения как: ключ, а не Индекс

Недавно я столкнулся с проблемой, для исправления которой мне нужно дать уникальное значение для :key в моем v-for. Но проблема в том, что у меня нет уникального значения, и предоставление индекса как :key не решает мою проблему . Мой массив для v-for - это список объектов, причем объект {sourceValue:"1",targetValue:"2",assigned:true} И моей уникальной ценностью будет комбина...

Удаление дубликатов из списка v-for в Vue

Я пытаюсь отсортировать список заметок по категориям. У меня есть несколько заметок в одной категории, поэтому v-for возвращает назначенную категорию заметок несколько раз в списке. Я понимаю, что должен использовать вычисляемое свойство для фильтрации списка, но я экспериментировал с приведенным ниже, sortedCategories, и, похоже, не могу заставить его работать. Возможно, также уместно, что в наст...

Отображение изображений с помощью v-for in Vue/Vuetify

Я пытаюсь отобразить некоторые изображения бок о бок в Столбцах, используя эту методику: <v-row> <v-col v-for="(n, i) in footerLogos" :key="i"> <v-img :src="`${n}`"></v-img> </v-col> </v-row> Массив: footerLogos: [ "@/assets/inc5000.jpg", "@/assets/inc-honor-roll.jpg", "@/assets/asa.jpg", "@/assets/soaringeagle.jpg", ...

Vuejs добавляет и удаляет классы с помощью v-for

я составляю список элементов с помощью цикла vuejs v-for. У меня есть некоторые данные API с сервера. items: [ { foo: 'something', number: 60 }, { foo: 'anything', number: 15 }, { foo: 'text', number: 20, } ] Шаблон <div v-for="(item,index) in items" :key="index"> <div :class="{ active: ????}" @click="toggleActive"> ...

вю.js v-for на двух строках таблицы

Vue 2, никакого веб-пакета. Я хочу визуализировать два trs одновременно, для основной и детальной расширяемой строки. Это то, чего я пытаюсь достичь: <table> <tbody> <div v-for="item in items"> <tr></tr> <tr class="detail-row"></tr> </div> </tbody> </table> Проблема в том, что <div> является недо...

Вью с JS не удается прочитать свойство не определено

Я использую цикл v-for для перечисления кнопок для каждой категории в моем массиве. Функция вызывается по щелчку мыши, но возвращает ошибку: TypeError: не удается прочитать свойство 'name' undefined Каждая кнопка правильно отображается в HTML со своим именем. V-для петли: <button :class="{selected: category.exist === true}" v-for="category in categories" :key="categor...

Как добавить значок шрифта awesome динамически в Vue.js

У меня есть два входа, расположенных в модальном режиме, и кнопка, которая генерирует еще два входа, когда пользователь нажимает на нее. Это работает, но я хочу добавить значок шрифта awesome рядом с двумя входами только для динамически создаваемых входов, как я могу добиться этого в Vue? Вот мой код до сих пор: <div class="price-round-creation-containe" v-for="(shareholder, inde...

соединение не удаляет текущий элемент

Я пытаюсь удалить текущий элемент по щелчку мыши, но когда я запускаю его, он удаляет только последний элемент. Я схожу с ума, на другом компоненте я сделал то же самое, и это сработало...Я не знаю, почему здесь! Это код, я использую различные библиотеки... <template> <div class="hours-container"> <div class="hours" v-for="(time, index) in hour"...

как выполнить цикл через вложенный ответ json с помощью vue js

На самом деле я новичок в Vue JS, поэтому у меня возникли некоторые проблемы с циклическим перебором ответов api с помощью v-for here's my html Получить Данные О Монетах <div v-for="coin in coinsData">{{coinsData.data.coins.name}}</div> мой javascript: var app = new Vue({ el: '#app', data: { coinsData: [] }, methods: { getCoin...

V-Если внутри V-для, внутри V-для

Я новичок в Vue и пытаюсь запустить оператор IF внутри двух v-fors. В основном я пытаюсь сравнить значение из одного массива объектов со значением другого массива объектов и, если это правда, визуализировать значение из массива объектов № 2. Вот код. <div v-bind:class="[isActive ? 'projectsWorkingOnActive' : 'projectsWorkingOnInactive']" v-for="rec in listOfEmployees" ...