Почему v-for возвращает undefined?

Question

[Leatington]

Пытаюсь сделать вывод в таблицу, находящуюся в v-dialog с помощью v-for, но каждый раз получаю сообщение "message is not defined".
Массив должен передаваться с помощью функции, так как информация получается из запроса.
Вот код:

<v-simple-table v-if="dialogs.information.data.security.passwords">
<thead>
    <th>Password</th>
    <th>Issued</th>
</thead>
<tbody>
    <tr v-for="message in on()">
        <td>{{ message.password }}</td>
        <td>{{ new Date(message.date * 1000).toLocaleDateString() }}</td>
    </tr>
</tbody>
</v-simple-table>

methods: {
    on() {
        return [
            {password: '123', date: 123456}
        ];
    },
}

Comments

[iBird Rose]

this.on() ?

[Leatington]

iBird Rose, нет, дело не в этом, в разметке vue он не нужен (с ним тоже не работает).

[Антон Антон]

А если заменить на вычисляемое (computed) свойство?

[Leatington]

Антон Антон, провобал, выдаёт тоже самое (также убирал "()" при перемещении в computed).

[Алексей]

Можете дать больше контекста?
у меня все нормально

[Leatington]

Алексей,

<v-dialog max-width="750px" v-model="dialogs.information.status" persistent scrollable>
					  	<v-card>
					  		<v-card-title>[{{ dialogs.information.data.server }}] {{ dialogs.information.data.nickname }}</v-card-title>
					  		<v-divider></v-divider>
					  		<v-card-text class="pa-0">
					  			<v-tabs max-width="500px" v-model="dialogs.information.active" vertical>
							      <v-tab><v-icon left>mdi-account</v-icon>User</v-tab>
							      <v-tab v-if="(Object.keys(dialogs.information.data.security).length > 0)"><v-icon left>mdi-lock</v-icon>Security</v-tab>
							      <v-tab v-bind:class="{'d-none': !dialogs.information.data.lua.scripts}"><v-icon left>mdi-access-point</v-icon>Scripts</v-tab>

							      <v-tab-item>
							      	<v-simple-table>
							      		<template v-slot:default>
								      		<tbody>
								      			<tr :key="key.name" v-for="key in dialogs.information.data.user">
								      				<th>{{ key.name }}</td>
								      				<td>{{ key.value }}</td>
								      			</tr>
								      		</tbody>
								      	</template>
								      </v-simple-table>
							      </v-tab-item>
							      <v-tab-item>
							      	<v-container v-if="(Object.keys(dialogs.information.data.security).length > 0)">
							      		<v-row v-if="dialogs.information.data.security.email">
							      			<v-col>
									      		<v-chip :color="(dialogs.information.data.security.email ? 'red' : 'green')" dark>{{ (dialogs.information.data.security.email ?? 'None') }}</v-chip>
									      		<v-chip :color="(key.value ? 'red' : 'green')" class="ma-1" v-for="key in dialogs.information.data.security.boolean" dark>{{ key.name }}</v-chip>
									      		<v-tooltip bottom>
												      <template v-slot:activator="{on, attrs}">
												      	<v-chip v-bind="attrs" v-on="on"><v-icon small>mdi-information</v-icon></v-chip>
												      </template>
												      <span>Updated {{ new Date(dialogs.information.data.security.updated * 1000).toLocaleDateString() }}</span>
												    </v-tooltip>
									      	</v-col>
							      		</v-row>
							      		<v-divider class="mt-3" v-if="(dialogs.information.data.security.email && dialogs.information.data.security.pin)"></v-divider>
							      		<v-tooltip v-if="dialogs.information.data.security.pin" bottom>
										      <template v-slot:activator="{on, attrs}">
										      	<v-chip class="mt-3" v-bind="attrs" v-bind:class="{'d-none': !dialogs.information.data.security.pin}" v-on="on" dark>{{ dialogs.information.data.security.pin.pin }}</v-chip>
										      </template>
										      <span>Updated {{ new Date(dialogs.information.data.security.pin.updated * 1000).toLocaleDateString() }}</span>
										    </v-tooltip>
							      	</v-container>
						      		<v-simple-table v-if="dialogs.information.data.security.passwords">
						      			<thead>
						      				<th>Password</th>
						      				<th>Issued</th>
						      			</thead>
							      		<tbody>
						      				<tr :v-for="message in on()">
							      				<td>{{ message.password }}</td>
							      				<td>{{ message.date }}</td>
							      			</tr>
							      		</tbody>
								      </v-simple-table>
							      </v-tab-item>
							      <v-tab-item>
							      	<v-chip v-for="key in dialogs.information.data.lua.scripts" dark>{{ key }}</v-chip>
							      </v-tab-item>
							  	</v-tabs>
					  		</v-card-text>
					  		<v-divider></v-divider>
        				<v-card-actions>
		              <v-spacer></v-spacer>
              		<v-btn color="error" @click="close('information')" depressed>Close</v-btn>
		              <v-spacer></v-spacer>
        				</v-card-actions>
					  	</v-card>
		        </v-dialog>

[Андрей]

Leatington, двоеточие перед v-for уберите и сё

[Leatington]

Андрей, не помогает, это я добавил потом, мало ли, поможет.

[Андрей]

Тогда киньте полностью файл, с содержимым тега script. А еще лучше - выложите на codepen полноценное воспроизведение проблемы. Вероятнее всего в процессе воспроизведения сами найдёте свою проблему

[Сергей delphinpro]

Leatington,

Массив должен передаватсья с помощью функции, так как информация получается из запроса.

Покажите-ка полный код метода on()

Answer 1

[Альберт Ефремов]

А для какой цели on нужен? Разве в инструкции по v-for из метода данные тягают )
v-for принимает: Array | Object | number | string | Iterable (с версии 2.6)

Как минимум нужно перенести в data, цикле убрать скобки, не забыть про key. И вообще нужна ли реактивность в данном случае.

data () {
    return {
      on: {password: '123', date: 123456},
    }
},