Select Git revision
Controller.java
MyNodes.vue 2.29 KiB
<template>
<div v-for="(nodes, index) in myArray" v-bind:key="index">
<form class="nodes">
<template v-if="nodes.node_readmode == false">
<textarea
v-model="nodes.node_text"
@input="editNode"
:id="nodes.node_id"
ref="textentry"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
></textarea>
<p class="info">*markdown supported & autosaves</p>
</template>
<template v-else>
<p
class="readmode"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text"
></p>
</template>
</form>
</div>
</template>
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
// import marked from 'marked'
export default {
name: 'MyNodes',
props: {
added: Boolean,
},
data() {
return {
myArray: [],
}
},
computed: {
...mapState({
// TODO: Can you filter here instead ?
myNodes: (state) => state.myNodes,
}),
nodesFiltered: function () {
return this.myNodes.myNodes.filter((nodes) => {
return nodes.node_deleted == false
})
},
},
mounted() {
setTimeout(this.loadData, 500)
//console.log(this.microcosmName.microcosmName)
// NOT SURE THIS IS DOING ANYTHING ???
// const unwatch = this.$watch('nodesFiltered', (value) => {
// this.$options.myArray = this.nodesFiltered
// this.$forceUpdate()
// // ignore falsy values
// if (!value) return
// // stop watching when nodesFiltered[] is not empty
// if (value && value.length) unwatch()
// // process value here
// })
},
watch: {
added: {
deep: true,
handler() {
setTimeout(this.loadData, 500)
},
},
},
methods: {
loadData() {
// console.log('loading data')
this.myArray = this.nodesFiltered
// console.log(this.myArray)
// this.$forceUpdate()
},
editNode(e) {
var nodeid = e.target.id
var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext })
},
},
}
</script>
<style scoped>
.nodes {
width: 95%;
border: 2px dashed black;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 0.5em;
}
textarea {
width: 95%;
}
</style>