Vue.js connector to Neo4j database not working - vue.js

Question

i am new to vue.js and neo4j. i tried using the Vue-neo4j connector - https://github.com/adam-cowley/vue-neo4j. But after implementing it according to the read.me file, when i click connect nothing happens nor are there errors in the console. could you help me out. i will paste my code below
Vue-neo4j version : 0.4.0
Neo4j version: 1.2.7
I imported the vue-neo4j in main.js file
Code -
<template>
<!-- ============ Body content start ============= -->
<div class="main-content">
<breadcumb :page="'Version 1'" :folder="'Dashboard'" />
<div>
<input v-model="protocol" />
<input v-model="host" />
<input v-model="port" />
<input v-model="username" />
<input v-model="password" />
<button #click="connect()">Connect</button>
</div>
</div>
<!-- ============ Body content End ============= -->
</template>
<script>
import { echartBar, echartPie } from "#/data/echarts";
import { echart1, echart2, echart3 } from "#/data/dashboard1";
export default {
metaInfo: {
// if no subcomponents specify a metaInfo.title, this title will be used
title: "Dashboard v1"
},
data() {
return {
protocol: "HTTP",
host: "localhost",
port: 7474,
username: "neo4j",
password: "aqt123",
};
},
methods: {
connect() {
return this.$neo4j.connect(
this.protocol,
this.host,
this.port,
this.username,
this.password,
);
},
driver() {
// Get a driver instance
return this.$neo4j.getDriver();
},
testQuery() {
// Get a session from the driver
const session = this.$neo4j.getSession();
this.$neo4j.desktop.connectToActiveGraph().then(driver => {
this.onConnect(driver);
});
session
.run("MATCH (n) RETURN count(n) AS count")
.then(res => {
console.log(res.records[0].get("count"));
})
.then(() => {
session.close();
});
}
}
};
</script>
<style>
.echarts {
width: 100%;
height: 100%;
}
</style>

Answer 1

In this example you are running the connect method but you aren't actually updating the state of your application afterwards. this.$neo4j.connect returns a Promise that you could use to set a property in the component and then change the UI based on that. Or if you are using vue-router, you could redirect the user to a new route when connected.
You could add a driver and error property to the component:
data() {
return {
protocol: "HTTP",
host: "localhost",
port: 7474,
username: "neo4j",
password: "aqt123",
driver: undefined,
error: undefined,
}
}
Then once the driver has connected successfully set the driver:
return this.$neo4j.connect(
this.protocol,
this.host,
this.port,
this.username,
this.password
)
.then(driver => this.driver = driver)
.catch(e => this.error = e)
Then in the template you could do something like this to change the UI based on whether the driver has been set or not:
<div v-if="!driver">
<!-- display any connection error -->
<div v-if="error">{{ error }}</div>
<input v-model="protocol" />
<input v-model="host" />
<input v-model="port" />
<input v-model="username" />
<input v-model="password" />
<button #click="connect()">Connect</button>
</div>
<div v-else>
<!-- show something different after the driver has been set -->
The driver has been set!
</div>