The javascript file is unable to detect the presence of the other file

Question

The javascript file is unable to detect the presence of the other file

I am facing an issue with two JavaScript files I have. The first one contains Vue code, while the other one includes a data array where I created the 'Feed' array. However, when trying to output a simple string from that array, the console throws an error saying 'Feed is not defined'. Any suggestions on how to resolve this?

window.Feed = (function(){
  const stories = [
    {
      id:1,
      title:'Levani',
      text:'lorem ipsum',
      votes:0,
      postedAt: '3min ago',
      storyImage: 'https://loremflickr.com/320/240?random=1'
    },]
    return {stories: stories};

new Vue({
  el: '#app',
  data:{
    stories: Feed.stories
  },
  methods:{
  }
});

<img v-bind:src="stories[0].storyImage" />
<script src="https://unpkg.com/vue"></script>
<script src="data.js"></script>
<script src="main.js"></script>

javascript vue.js

Answer 1

Answer №1

Make sure to remember to call the Immediately Invoked Function Expression (IIFE) like this:

window.Feed = (function() {
  const stories = [{
    id: 1,
    title: 'Levani',
    text: 'lorem ipsum',
    votes: 0,
    postedAt: '3min ago',
    storyImage: 'https://loremflickr.com/320/240?random=1'
  }, ]
  return {
    stories: stories
  };
}()); // Don't forget to CALL the IIFE by adding "()"

new Vue({
  el: '#app',
  data: {
    stories: Feed.stories
  },
  methods: {}
});

<div id="app">
  <img v-bind:src="stories[0].storyImage" />
</div>
<script src="https://unpkg.com/vue"></script>

Answer 2

Make sure to remember to call the Immediately Invoked Function Expression (IIFE) like this:

window.Feed = (function() {
  const stories = [{
    id: 1,
    title: 'Levani',
    text: 'lorem ipsum',
    votes: 0,
    postedAt: '3min ago',
    storyImage: 'https://loremflickr.com/320/240?random=1'
  }, ]
  return {
    stories: stories
  };
}()); // Don't forget to CALL the IIFE by adding "()"

new Vue({
  el: '#app',
  data: {
    stories: Feed.stories
  },
  methods: {}
});

<div id="app">
  <img v-bind:src="stories[0].storyImage" />
</div>
<script src="https://unpkg.com/vue"></script>

The javascript file is unable to detect the presence of the other file

Answer №1

Similar questions

Error encountered with MobileFirst version 8 and Angular JS v1.5.3 integration using Bootstrap

Remove webpack functions from the bundle

TypeError: Unable to access the 'classify' property of an object that has not been defined (please save the ml5.js model first)

What is the method for obtaining the selected option value while hovering over a dropdown list option?

Unexpected Issue with JavaScript Ajax (Using jQuery.post): The Promise State Turns to "Rejected"

Returning a Response in HapiJS Routes from Incoming Requests

`Nextjs customizes the position of locales`

Difficulty with deploying Next.js to Vercel due to restrictions on rate limits when utilizing getStaticProps()

In ReactJS, when passing an array of objects to a child component, the first instance may sometimes return as undefined, causing the code to break

The functionality for dragging elements is not functioning properly in JavaScript

What could be causing all the flickering in this presentation?

Some packages seem to be missing in React Native

What is the best way to successfully send an object through AJAX once all its updates are completed?

Using AngularJS directives in Markdown

Is there a way to dynamically update the TargetControlID of an AutoCompleteExtender using client-side JavaScript?

Tips for developing a sophisticated HTML quiz

Change the attribute to read-only upon modification of the dropdown value

Tips on passing a variable into a controller using jQuery AJAX from the URL

Demonstration of using .queue() and .dequeue() in relation to $.queue() and $.dequeue()

Developing a Rails application integrated with Pusher or Faye for real