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>
javascriptvue.js

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind using angle brackets to access the initial value of an array with a variable inside?

I've been experimenting with this technique several times, but I still can't quite grasp why it works and haven't been able to find an answer. Can someone please explain? let myArray = [0, 1] let [myVar] = myArray console.log(myVar) // outpu ...

javascript

I am struggling to figure out how to make the responsive menu close

#switch image var up = 'https://image.flaticon.com/icons/svg/149/149187.svg'; var down = 'https://image.flaticon.com/icons/svg/128/128397.svg'; $('#resNavToggle').click(function() { if ($('.resNavIcon').attr( ...

javascript

My Angular project is experiencing issues with Socket.IO functionality

After successfully using a post method in my endpoint, I encountered an error when integrating it with socket io. The error pertained to a connection error and method not being found. Any help or source code provided would be greatly ap ...

javascriptangular

Creating custom CSS for Styled Components in ReactJS

I'm struggling with CSS in React using styled components. Below is the code snippet I am working with: import React from 'react'; import { Navbar, Container, Row, Col } from 'reactstrap'; import styled from 'styled-components& ...

javascriptcssreactjsjsxstyled-components

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript

In the snippet below, I have created a multi-step form where users can provide details. The issue is that currently only text input fields are being accepted. The array of questions specifies the type of input required for each question: Question no.1 req ...

javascripthtmljquerycss

The Vuetify accordion template is not appearing due to a v-for loop issue in Nuxt.js

My goal is to set up an FAQ page using Nuxt.js. The template I obtained from Vuetify doesn't display correctly on my localhost. Instead, I'm encountering errors. If I replace 'v-for "(item,i) in 5" : key="i"' as per the template source ...

javascriptvue.jsnuxt.js

Utilizing the controller specified in the template that has been included

Within this snippet of code, I am attempting to utilize a controller named FooCtrl that is defined in the included template app/foo.html, using the directive common.script. angular.module('common.script', []).directive('script', func ...

javascriptangularjslazy-loadingangularjs-ng-include

What steps can be taken to achieve a smooth scrolling speed adjustment?

Upon discovering this website, I was impressed by its smooth scrolling features. The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, p ...

javascriptjquerycsswordpressanimation

Angular-Chart.js - Issue with Tooltip not displaying for data points with a value of 0

Within my Angular Chart JS Application, I have encountered an issue where having "0" values in my data array seems to affect the functionality of the tooltip for the corresponding bar. Interestingly, changing the "0" values to "0.1" resolves the problem... ...

javascriptangularjsjsonchart.js

What is the best way to pass an email as a Laravel parameter within a function using Angular?

I'm currently working on a feature that allows users to delete their account only if the input field matches their email address. However, I encountered an error: Error: $parse:lexerr Lexer Error when attempting to set this up. Here is my HTML code: ...

javascriptphpangularjslaravel

Experiencing difficulties with $watch in my Angular controller

Having trouble getting a $watch function to work properly while testing a controller. In this scenario, the goal is to display ctrl.value in either ARI format or AEP format, but the underlying $scope.model is always kept in the ARI format. When ctrl.value ...

javascriptangularjskarma-jasmine

JQuery plugin for creating interactive date selection forms

Having some trouble creating a dynamic form. The datepicker seems to only work on the first row and I can't click it. Tried a few different codes but no luck so far. Below is the code excluding the PHP part, which is just for inserting into a database ...

javascriptphpjqueryjquery-ui-datepicker

Getting an error that reads, "Unable to read properties of null (reading 'uid')," but surprisingly, the application continues to function properly

After logging out, I encounter the following error: (Uncaught TypeError: Cannot read properties of null (reading 'uid')). However, my application functions as intended. During the logout process, I delete an API access token from the user docume ...

javascriptreactjsfirebasenext.js

Why is it that injecting javascript within innerHTML seems to work in this case?

According to the discussion on this thread, it is generally believed that injecting javascript in innerHTML is not supposed to function as expected. However, there are instances where this unconventional method seems to work: <BR> Below is an examp ...

javascripthtmlajaxdom

Show drawer when modal is open in React Native

Currently, I am working on a project in react-native and facing an issue where the modal is appearing over the drawer navigator. Despite trying to adjust the zIndex property, it has not been effective. Details of my modal: <Modal visible={isVisible} ...

javascriptreactjsreact-nativeuser-interface

What is the best way to develop a JavaScript function that divides the total width by the number of table headers (`th`)?

I recently came across this amazing scrollable table on a website, but I'm facing an issue with resizing the headers equally. Due to my lack of knowledge in JavaScript, I'm uncertain about how to tackle this problem. My intuition tells me that a ...

javascriptjqueryhtml

Is there a way to arrange an array based on the product or quotient of two values?

I'm working with an array of posts, each containing data on 'views' and 'likes', along with the user IDs associated with those likes. My goal is to sort this array based on the like rate. However, my current approach seems to be i ...

javascriptarrays

Post-render for HTML linkage

Is there a method to execute customized code after Knockout has inserted the html into the DOM and completed rendering? This is required in order to bind a nested view model to dynamically generated html code. Perhaps like this: <div data-bind="html: ...

javascriptdomknockout.js

Using jQuery to fetch and display content from an external webpage

Is there a more effective method for loading an external web page on the same server? I've experimented with .load() and .get(), but they only load the page after the PHP script is finished. I've also used an iFrame, which displays the informatio ...

javascriptjqueryajaxiframeload

Is it possible for me to determine whether a javascript file has been executed?

I am currently working with an express framework on Node.js and I have a requirement to dynamically change the value (increase or decrease) of a variable in my testing module every time the module is executed. Is there a way to determine if the file has ...

javascriptnode.jsexpress