Vue.js connector to Neo4j database not working

user_13531819 0
Viewed 326

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

  1. Vue-neo4j version : 0.4.0
  2. Neo4j version: 1.2.7
  3. 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>
vue.js neo4j
1 Answers

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>
user_62870810
Related