Labels are not being displayed in nodes #9

luiscarbonell · 2020-03-30T08:57:19Z

Here's the example in a CodePen: https://codepen.io/luiscarbonell/pen/xxGMdMM

<!DOCTYPE html>
<html>

<head>
  <title>Vue.js & Vis.js</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.1/css/bulma.min.css">
  <link rel="stylesheet" href="https://unpkg.com/vis-network@7.4.0/dist/vis-network.min.css">

  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-vis-network@1.0.2/dist/vueVisNetwork.umd.js"></script>
  <style>
    * {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="main">
    <div class="columns">
      <div class="column is-6">
        <div class="box">
          <div class="container">
            <input class="input" type="text" placeholder="ID" v-model="form.node.id">
            <input class="input" type="text" placeholder="Label" v-model="form.node.label">

            <div class="field has-addons">
              <p class="control">
                <button class="button is-success" @click="addNode">Create Node</button>
              </p>
              <p class="control">
                <button class="button is-info" @click="editNode">Edit Node</button>
              </p>
              <p class="control">
                <button class="button is-danger" @click="deleteNode">Delete Node</button>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-6">
        <div class="box">
          <div class="container">
            <network ref="network" :nodes="network.nodes" :edges="network.edges" :options="network.options" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    Vue.component('network', vueVisNetwork.Network);

    new Vue({
      el: '#main',
      data() {
        return {
          network: {
            nodes: [{
              id: 1,
              label: "1",
              title: "1"
            }],
            edges: [],
            options: {
              edges: {
                smooth: {
                  type: "cubicBezier",
                  forceDirection: "horizontal",
                  roundness: 0.4
                }
              },
              layout: {
                hierarchical: {
                  direction: "LR"
                }
              },
              nodes: {
                font: "14px sans-serif"
              },
              physics: false
            }
          },
          form: {
            node: {
              id: "",
              label: ""
            },
            edge: {
              id: "",
              from: "",
              to: ""
            }
          }
        }
      },
      methods: {
        addNode() {
          const self = this;
          try {
            const node = { ...self.form.node };
            self.network.nodes.push(node);
          } catch(error) {
            console.log(error)
          }
        },
        editNode() {
          const self = this;
          try {
            const node = { ...self.form.node }; console.log(node);
            const index = self.network.nodes.findIndex(n => n.id == node.id); console.log(index);
            self.network.nodes[index] = {
              ...self.network.nodes[index],
              ...node
            }; console.log(self.network.nodes[index]);
            console.log(self.visData);
          } catch(error) {
            console.log(error);
          }
        },
        deleteNode() {
          
        }
      },
      created() {
      }
    })
  </script>
</body>

</html>

r3code added bug Something isn't working good first issue Good for newcomers help wanted Extra attention is needed labels Jun 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Labels are not being displayed in nodes #9

Labels are not being displayed in nodes #9

luiscarbonell commented Mar 30, 2020

Labels are not being displayed in nodes #9

Labels are not being displayed in nodes #9

Comments

luiscarbonell commented Mar 30, 2020