Вопросы и ответы - v-for
api array.prototype.map arrays axios bind checkbox computed-properties diff for-loop html html-table javascript json jsx key laravel loops nested-loops nuxt.js owl-carousel properties radio-button rows set splice src transition undefined v-for v-model vue-component vue-composition-api vue.js vuejs2 vuejs3 vuetify.js vuex
Есть ответ!
У меня есть следующий фильтр
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...
Есть ответ!
Я пытаюсь создать 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...
Есть ответ!
Шаблон:
<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] = ...
Есть ответ!
Я пытаюсь понять, как заставить цикл работать внутри другого цикла в 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...
Есть ответ!
Я получаю данные из облака. Я просмотрел много вопросов в StackOverflow, но все они использовали данные в data(). Я супер новичок в использовании Vue.js, поэтому не смог применить его в своем коде.
Я хотел бы отобразить дубликаты данных только один раз в v-for. В этом случае {{item.matched_product.name}} отображается повторно.
<template slot-scope="scope">
<div v-if="sco...
Есть ответ!
Я знаю, что есть много вопросов и ответов о том, как использовать v-bind в v-for для привязки к img src ... однако я потратил целый день на тщетные эксперименты. Прошу прощения за дублирующий вопрос, но не мог бы кто-нибудь мне помочь?
Я использую vue@2.6.12 и @vue/cli 4.5.6.
Я пытаюсь показать несколько изображений в цикле v-for, привязывая пути к файлам к img src. У меня есть данные о навыках в ...
Есть ответ!
У меня есть массив цветов в моем состоянии vuex, и в моем компоненте я хочу указать каждый цвет для каждого элемента, который приходит из v-for.
// state
state: {
APIData: {
userInfo: {},
allClasses: [
{
subject: 'subject1',
...
},
{
subject: 'subject2',
...
},
{
subject: 'subject3',
...
Есть ответ!
Я работаю над распечаткой номеров страниц, на которые пользователь может нажать для компонента пейджера. Vue.js. Я вижу, что документы ясно говорят, что v-for можно использовать для диапазона:
в-ДЛЯ можно также воспользоваться целым числом. В этом случае он будет повторять
шаблон столько раз.
<div> <span v-for="n in 10">{{ n }} </span> </div>
Результат:
1 2 3 4...
Есть ответ!
Я хочу вложить 2 v-образных петли. Это должно быть довольно просто, но это не работает, и я понятия не имею, почему.
Когда я просматриваю пользователей и показываю их имена, это работает нормально. Когда я беру первый элемент из массива сеансов и отображаю его имя, это тоже работает нормально.
Однако, когда я хочу циклически перебирать массив сеансов во вложенном цикле v-for, массив кажется пустым...
Есть ответ!
Недавно я столкнулся с проблемой, для исправления которой мне нужно дать уникальное значение для :key в моем v-for. Но проблема в том, что у меня нет уникального значения, и предоставление индекса как :key не решает мою проблему . Мой массив для v-for - это список объектов, причем объект
{sourceValue:"1",targetValue:"2",assigned:true}
И моей уникальной ценностью будет комбина...
Есть ответ!
Я пытаюсь отсортировать список заметок по категориям. У меня есть несколько заметок в одной категории, поэтому v-for возвращает назначенную категорию заметок несколько раз в списке.
Я понимаю, что должен использовать вычисляемое свойство для фильтрации списка, но я экспериментировал с приведенным ниже, sortedCategories, и, похоже, не могу заставить его работать.
Возможно, также уместно, что в наст...
Есть ответ!
Я пытаюсь отобразить некоторые изображения бок о бок в Столбцах, используя эту методику:
<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. У меня есть некоторые данные 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">
...
Есть ответ!
Vue 2, никакого веб-пакета. Я хочу визуализировать два trs одновременно, для основной и детальной расширяемой строки. Это то, чего я пытаюсь достичь:
<table>
<tbody>
<div v-for="item in items">
<tr></tr>
<tr class="detail-row"></tr>
</div>
</tbody>
</table>
Проблема в том, что <div> является недо...
Есть ответ!
Я использую цикл v-for для перечисления кнопок для каждой категории в моем массиве. Функция вызывается по щелчку мыши, но возвращает ошибку:
TypeError: не удается прочитать свойство 'name' undefined
Каждая кнопка правильно отображается в HTML со своим именем.
V-для петли:
<button :class="{selected: category.exist === true}" v-for="category in categories" :key="categor...
Есть ответ!
У меня есть два входа, расположенных в модальном режиме, и кнопка, которая генерирует еще два входа, когда пользователь нажимает на нее. Это работает, но я хочу добавить значок шрифта 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"...
Есть ответ!
На самом деле я новичок в 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...
Есть ответ!
Я новичок в Vue и пытаюсь запустить оператор IF внутри двух v-fors.
В основном я пытаюсь сравнить значение из одного массива объектов со значением другого массива объектов и, если это правда, визуализировать значение из массива объектов № 2.
Вот код.
<div v-bind:class="[isActive ? 'projectsWorkingOnActive' : 'projectsWorkingOnInactive']" v-for="rec in listOfEmployees" ...