What is the process for importing a JavaScript file into a Vue component?

Question

What is the process for importing a JavaScript file into a Vue component?

Having trouble importing JSON results into a Vue component?

The results are as follows:

[{"id":"d023c5e3-ca3c-4d97-933a-1112a8516eee",
"score":9001,
"updated":"2018-12-07T13:48:33.6366278",
"player":Johanna,
"category":Funny},
{"id":"398b65fb-e741-4801-be49-926b111ec871",
"score":99,
"updated":"2018-12-11T11:13:42.8312936",
"player":Johanna,
"category":Music}]

Code in GetResult.js:

import axios from 'axios'
const url = 'http://localhost:5000/api/Results';

export default {
  data () {
    return {
      results: {}
    }
  },
  created () {
    axios.get(url)
     .then(response => {
     console.log(response.data)
     this.$data.results = response.data
   })
  .catch(err => {
    console.log(err)
  })
}
}

Code in Toplist.vue:

<template>
  <div class="TopList">
   <table class="table table-striped">
    <thead>
      <tr>
      <th>Name</th>
      <th>Score</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="result in resultList" :key="result.id">
      <td>{{ result.player }}</td>
      <td>{{ result.score }}</td>
      <td>{{ result.category }}</td>
    </tr>
  </tbody>
</table>
</div>

<script>
import results from './ResultApi/GetResult.js'

export default {
  name: 'TopList', 
  data() {
    return {
     resultList: results
   }
 }
}
</script>

javascript json vue.js

Answer 1

Answer №1

Toplist.vue

// Omitting the HTML portion

<script>
export default {
  name: 'TopList', 
  data() {
    return {
      results: []
    }
  },
  mounted () {
    this.fetchResults()
  },
  methods: { 
    fetchResults () {
      axios.get(url)
        .then(response => this.results = response.data)
        .catch(err => console.error(err))
    }
  }
}
</script>

Here is an example solution tailored for your scenario.

Answer 2

Toplist.vue

// Omitting the HTML portion

<script>
export default {
  name: 'TopList', 
  data() {
    return {
      results: []
    }
  },
  mounted () {
    this.fetchResults()
  },
  methods: { 
    fetchResults () {
      axios.get(url)
        .then(response => this.results = response.data)
        .catch(err => console.error(err))
    }
  }
}
</script>

Here is an example solution tailored for your scenario.

Answer 3

Answer №2

...
created () {
  axios.get(url).then(response => {
    console.log(response.data)
    this.$data.results = response.data // incorrect
    this.results = response.data // correct
  })
...

If you are not using Vuex, move the external code from fetching results into the component itself:

<template>
  <div class="TopList">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Score</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'TopList',

  data() {
    return {
      url: 'http://localhost:5000/api/Results',
      results: []
    }
  },

  created () {
    axios.get(this.url).then(({ data }) => {
      this.results = data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

External file usage:

getResults.js

import axios from 'axios'
const url = 'http://localhost:5000/api/Results'

export default function () {
  axios.get(url)
}

TopList.vue

<template>
  <div class="TopList">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Score</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import getResults from './ResultApi/getResult.js'

export default {
  name: 'TopList',

  data() {
    return {
      results: []
    }
  },

  created () {
    getResults().then(({ data }) => {
      this.results = data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

Modified version of TopList.vue with async function:

<template>
  <div class="TopList">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Score</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import getResults from './ResultApi/getResult.js'

export default {
  name: 'TopList',

  data() {
    return {
      results: []
    }
  },

  async created () {
    try {
      let { data } = await getResults()
      this.results = data
    } catch(err) {
      console.log(err)
    }
  }
}
</script>

Answer 4

...
created () {
  axios.get(url).then(response => {
    console.log(response.data)
    this.$data.results = response.data // incorrect
    this.results = response.data // correct
  })
...

If you are not using Vuex, move the external code from fetching results into the component itself:

<template>
  <div class="TopList">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Score</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'TopList',

  data() {
    return {
      url: 'http://localhost:5000/api/Results',
      results: []
    }
  },

  created () {
    axios.get(this.url).then(({ data }) => {
      this.results = data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

External file usage:

getResults.js

import axios from 'axios'
const url = 'http://localhost:5000/api/Results'

export default function () {
  axios.get(url)
}

TopList.vue

<template>
  <div class="TopList">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Score</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import getResults from './ResultApi/getResult.js'

export default {
  name: 'TopList',

  data() {
    return {
      results: []
    }
  },

  created () {
    getResults().then(({ data }) => {
      this.results = data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

Modified version of TopList.vue with async function:

<template>
  <div class="TopList">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Score</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import getResults from './ResultApi/getResult.js'

export default {
  name: 'TopList',

  data() {
    return {
      results: []
    }
  },

  async created () {
    try {
      let { data } = await getResults()
      this.results = data
    } catch(err) {
      console.log(err)
    }
  }
}
</script>

Answer 5

Answer №3

Make sure to receive props from the parent component Check out the documentation here

Let's take a look at this example:

Here is an example of a parent component:

<template>
  <div id="app"><Toplist :result-list="results" /></div>
</template>

<script>
import Toplist from "./components/Toplist.vue";

export default {
  name: "App",
  data() {
    return {
      results: []
    };
  },
  components: {
    Toplist
  },
  mounted() {
    const fetchedData = [
      {
        id: "d023c5e3-ca3c-4d97-933a-1112a8516eee",
        score: 9001,
        updated: "2018-12-07T13:48:33.6366278",
        player: "Johanna",
        category: "Funny"
      },
      {
        id: "398b65fb-e741-4801-be49-926b111ec871",
        score: 99,
        updated: "2018-12-11T11:13:42.8312936",
        player: "Johanna",
        category: "Music"
      }
    ];

    this.results = fetchedData;
  }
};

And here is the child component that receives data from props:

<template>
  <div class="TopList">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Score</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="result in resultList" :key="result.id">
          <td>{{ result.player }}</td>
          <td>{{ result.score }}</td>
          <td>{{ result.category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Toplist",
  props: ["resultList"],
  
};
</script>

View the demo here

Answer 6

Make sure to receive props from the parent component Check out the documentation here

Let's take a look at this example:

Here is an example of a parent component:

<template>
  <div id="app"><Toplist :result-list="results" /></div>
</template>

<script>
import Toplist from "./components/Toplist.vue";

export default {
  name: "App",
  data() {
    return {
      results: []
    };
  },
  components: {
    Toplist
  },
  mounted() {
    const fetchedData = [
      {
        id: "d023c5e3-ca3c-4d97-933a-1112a8516eee",
        score: 9001,
        updated: "2018-12-07T13:48:33.6366278",
        player: "Johanna",
        category: "Funny"
      },
      {
        id: "398b65fb-e741-4801-be49-926b111ec871",
        score: 99,
        updated: "2018-12-11T11:13:42.8312936",
        player: "Johanna",
        category: "Music"
      }
    ];

    this.results = fetchedData;
  }
};

And here is the child component that receives data from props:

<template>
  <div class="TopList">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Score</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="result in resultList" :key="result.id">
          <td>{{ result.player }}</td>
          <td>{{ result.score }}</td>
          <td>{{ result.category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Toplist",
  props: ["resultList"],
  
};
</script>

View the demo here

What is the process for importing a JavaScript file into a Vue component?

Answer №1

Answer №2

Answer №3

Similar questions

Does the data in a Vuex store always stay in memory?

Is there a method in JavaScript to access the object to which a function was originally bound?

What is the best way to adjust the color of the colon within my timer digits using a span element?

Can you explain the extent to which JavaScript's setTimeout() and clearTimeout() apply?

Which Javascript/Css/HTML frameworks and libraries would you suggest using together for optimal development?

Using TypeScript to import a Vue 2 component into a Vue 3 application

Adding data from one object to another in Javascript results in duplicated entries

What could be causing the child of an ES6 imported object to return as undefined?

React component will automatically rerender if the cache is disabled in the Chrome browser

How to efficiently create a unique object on MongoDB during the first instance

Establishing the initial value for an input file form

Utilizing AngularJS filter method to populate data

Is it possible to concurrently hot module reload both the server (.NET Core) and client (Angular)?

Converting an object to JSON without prior knowledge of its type

Connect multiple tables in JSON format

Issue with VueJS beforeRouteEnter hook not triggering

Vue.js HTML5 Editor_vueful

The use of HTML5 required attribute is ineffective when submitting forms via AJAX

Refreshing MongoDB data by utilizing values from an object

The struggle of encoding: Making a JSON ajax call (utf-8) to convert Latin1 characters to uppercase