Putting things to display from an array with the help of mapGetters , VUEJS, vuex,vuetify

问题

My page consist of two routes one with the home page and a another with a config panel.

In my home page ,I am having a container where i put some informations for example date, time,current celsius and so on , under that there is a container where you can put some daily informations configurated by an user. User gives some kind of text to the input and also a second value which stands for the timeout( user can decide how many secs it should be displayed) , so im getting the information with the help of vuex so iam setting my states to the values that were given in those inputs (i am getting an array one with strings(belongs to the text input) and one array with integers in it (belongs to the sec)), so for example i am having["hello","how are you"] and a ["12",14"] array.

Now what my problem is that i want to write out only one message for once and that message is linked to its sec value so it dissapears when it has to and after the the SECOND value should follow it (the second text should be written out and the first should be gone by that time and so on.)

I am linking here my code :

<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>

Right now it just writes out the whole array as two string and dissapears right after. So i want to write out the first element and want it to be visible untill its sec values time is over, and i want it to keep doing that untill it got some values.

MY storeJS:

const state = {
  message: [],
  // console.log(message);
  sec: +[],
  // other state
};
const getters = {
  message: (state) => {
    // console.log(this.state.message);

    return state.message;
  },

  sec: (state) => {
    return state.sec;
  },
  // other getters
};

const actions = {
  setMessage: ({ commit, state }, inputs) => {
    commit(
      'SET_MESSAGE',
      inputs.map((input) => input.message)
    );

    return state.message;
  },

  setSec: ({ commit, state }, inputs) => {
    commit('SET_TIMEOUT', inputs.map((x) => x.sec).map(Number));
    console.log(inputs.map((x) => x.sec).map(Number));
    return state.sec;
  },
  // other actions
};
const mutations = {
  SET_MESSAGE: (state, newValue) => {
    state.message = newValue;
  },

  SET_TIMEOUT: (state, newSecVal) => {
    state.sec = newSecVal;
  },
  // other mutations
};

export default {
  state,
  getters,
  actions,
  mutations,
};

回答1:

Your problem here is the key

  <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

The key must be unique for each message and be a string, you are passing an object I think. If your messages have an id for example use it like this

  <h1 v-for="m of message" :key="m.id" class="info">

来源：https://stackoverflow.com/questions/62717074/putting-things-to-display-from-an-array-with-the-help-of-mapgetters-vuejs-vue

标签

javascript

Vue.js

vuex

vuetify.js

vue-router