YourNodes.vue 2.13 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div v-for="(nodes, index) in myArray" v-bind:key="index">
    <form class="nodes">
      <p>{{ nodes.node_id }}</p>

      <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 &amp; 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'
Adam Procter's avatar
Adam Procter committed
30
// import marked from 'marked'
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

export default {
  name: 'YourNodes',

  props: {
    added: Boolean,
  },

  data() {
    return {
      myArray: [],
    }
  },

  computed: {
    ...mapState({
      myNodes: (state) => state.mynodes,
    }),

    nodesFiltered: function () {
      return this.myNodes.myNodes.filter((nodes) => {
        return nodes.node_deleted == false
      })
    },
  },

  mounted() {
    setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
59
60
61
62
63
64
65
66
67
68
    // 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
    // })
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
  },

  watch: {
    added: {
      deep: true,
      handler() {
        setTimeout(this.loadData, 200)
      },
    },
  },

  methods: {
    loadData() {
      this.myArray = this.nodesFiltered
      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;
}
</style>