<template> <div class="nodes" v-for="(nodes, index) in otherNodes.otherNodes" :key="index" :style="{ backgroundColor: nodes.node_color, }" > <p class="readmode" :id="nodes.node_id" v-html="marked(nodes.node_text)" ></p> </div> </template> <script> // @ is an alias to /src import { mapState } from 'vuex' import marked from 'marked' export default { name: 'OtherNodes', computed: { ...mapState({ otherNodes: (state) => state.otherNodes, }), }, mounted() { this.$store.dispatch('getOthernodes') setTimeout(this.loadData, 500) setInterval(this.loadData, 5000) }, methods: { loadData() { this.$store.dispatch('setOthernodes') }, marked, }, } </script> <style> h1 { margin: 0em; padding: 0em; font-size: 4.2em; font-family: houschka-rounded, sans-serif; font-weight: 700; font-style: normal; color: black; } h2 { margin: 0em; padding: 0em; font-size: 3.2em; font-family: houschka-rounded, sans-serif; font-weight: 700; font-style: normal; color: black; } h3 { margin: 0em; padding: 0em; font-size: 2.2em; font-family: houschka-rounded, sans-serif; font-weight: 700; font-style: normal; color: black; } .nodes { width: 95%; background-color: rgb(155, 194, 216); margin-top: 1em; margin-left: 0.5em; } img { width: 45%; } </style>