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
<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 &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
28
// import marked from 'marked'
29
30
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

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
57
58
59
60
61
62
63
64
65
66
    // 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
    // })
67
68
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
  },

  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;
}
ap2x07's avatar
ap2x07 committed
101
102
103
104

textarea {
  width: 95%;
}
105
</style>