javascript 文件看不到另一个文件

标签 javascript vue.js

我有两个 javascript 文件,其中一个有 vue 代码,另一个有一些数据数组,在其中创建了“Feed”数组,当我尝试从该数组输出简单字符串时控制台给出错误并显示“Feed 未定义”有任何线索吗?

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>

最佳答案

您需要实际调用 IIFE:

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
  };
}()); // You need to actually CALL the IIFE so add "()"

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>

关于javascript 文件看不到另一个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59617476/

相关文章:

javascript - 将值从 map 传递到状态

javascript - 用户关闭页面时如何调用服务器方法

node.js - 使用 Jest 在 VueJS 组件中模拟自定义模块

javascript - 如何在 Vue (Typescript) 中使用 axios?

javascript - 数组值中的 HTML 标记

javascript - 在 Vue.Js 中的 v-text 中附加多个字段

javascript - 与 .find(someElem) 相反,即。如果事件处理程序的 e.target 想要省略子项

javascript - 带系列图表的 HighCharts DatePicker

javascript - 退出脚本或在选项卡中一次运行 Tamerpmonkey Userscript 的方法?

javascript - 使用 django REST 和 Vue.js 传播不可迭代实例的无效尝试