Javascript 在mapGetters、VUEJS、vuex和vuetify的帮助下从阵列中显示内容
我的页面由两条路线组成，一条是主页，另一条是配置面板 在我的主页中，我有一个容器，在其中我放置了一些信息，例如日期、时间、当前摄氏度等，在该容器下，您可以放置一些由用户配置的日常信息。用户为输入提供了某种文本，还提供了一个表示超时的第二个值（用户可以决定它应该显示多少秒），因此我在vuex的帮助下获得了信息，因此iam将我的状态设置为这些输入中给出的值（我得到了一个带有字符串的数组（属于文本输入）一个数组中有整数（属于sec），例如我有一个[“你好”，“你好吗”]和一个[“12”，14”]数组 现在我的问题是，我只想一次写出一条消息，并且该消息与它的秒值相关联，因此它在必须的时候消失，并且在第二个值之后，第二个值应该跟随它（第二个文本应该被写出，第一个文本应该在那个时候消失，依此类推） 我在这里链接我的代码：Javascript 在mapGetters、VUEJS、vuex和vuetify的帮助下从阵列中显示内容,javascript,vue.js,vuex,vuetify.js,vue-router,Javascript,Vue.js,Vuex,Vuetify.js,Vue Router,我的页面由两条路线组成，一条是主页，另一条是配置面板 在我的主页中，我有一个容器，在其中我放置了一些信息，例如日期、时间、当前摄氏度等，在该容器下，您可以放置一些由用户配置的日常信息。用户为输入提供了某种文本，还提供了一个表示超时的第二个值（用户可以决定它应该显示多少秒），因此我在vuex的帮助下获得了信息，因此iam将我的状态设置为这些输入中给出的值（我得到了一个带有字符串的数组（属于文本输入）一个数组中有整数（属于sec），例如我有一个[“你好”，“你好吗”]和一个[“12”，14”]数组
<template>
<body>
<div class="container">
<table>
<thead>
<tr>
<th scope="col" class="colc">Date</th>
<th scope="col header" class="colc">time</th>
<th scope="col header" class="colc">CELSIUS</th>
<th scope="col header" class="colc">WINDSPEED</th>
<!-- <th></th> -->
</tr>
</thead>
<tbody>
<tr class="priority-200">
<td id="writeDay" class="default">{{ createdDate }}</td>
<td " id="hour" class="default">{{ createdHours }}</td>
<td id="degree" class="default"></td>
<td id="speed" class="default"></td>
</tr>
</tbody>
</table>
<div class="container2" v-show="elementVisible">
<h1 v-for="m of message" :key="m" class="info"> ----> right now every value is appearing at the same time and dissapearing right after because it is not listening to the sec
<span>{{m}}</span>
</h1>
</div>
</div>
</body>
</template>
<script>
import moment from "moment";
import { mapGetters } from "vuex";
export default {
name: "Home",
data() {
return {
// message: this.store.state.message
elementVisible: true
};
},
computed: {
...mapGetters(["message", "sec"]),
...mapGetters({
message: "message",
sec: "sec"
}),
createdDate() {
return moment().format("DD-MM-YYYY ");
},
createdHours() {
return moment().format("HH:mm ");
}
},
mounted() {
this.$store.dispatch("SET_MESSAGE");
this.$store.dispatch("SET_SEC");
setTimeout(() => (this.elementVisible = false), this.sec); -------> **thats how it dissapears after a given time**
}
};
</script>
你的问题是关键
<h1 v-for="m of message" :key="m" class="info"> ----> right now every value is appearing at the same time and dissapearing right after because it is not listening to the sec
--->现在，每个值都同时出现，然后立即消失，因为它没有监听sec
<h1 v-for="m of message" :key="m.id" class="info">
<h1 v-for="m of message" :key="m.id" class="info">