vue-vis-network
vue-vis-network copied to clipboard
Published
20 hours ago •
r3code
r3code
Labels are not being displayed in nodes
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/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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>
