console.log在vue.js脚本中不起作用

我是vue.js的新手，我正在尝试构建一个显示从API获取的数据的基本应用程序

我不明白为什么不能在脚本中使用console.log：

<script>

    import Header from './components/layout/Header.vue'
    import Todos from './components/Todo.vue'

    export default {
      name: 'app',
      components: {
        Todos,
        Header,
      },
      data () {
        return {
          todos : []
        }
      },
      methods : {

        created () {
            fetch('https://jsonplaceholder.typicode.com/todos')
            .then( resp => resp.json())
            .then( data => {

                console.log(data);
            })
            .catch(err => err)

        }
      }
    }
</script>

从“./components/layout/Header.vue”导入标题
从“./components/Todo.vue”导入Todo
导出默认值{
名称：“应用程序”，
组成部分：{
待办事项，
标题，
},
数据（）{
返回{
待办事项：[]
}
},
方法：{
创建（）{
取（'https://jsonplaceholder.typicode.com/todos')
.then（resp=>resp.json（））
。然后（数据=>{
控制台日志（数据）；
})
.catch（err=>err）
}
}
}

我总是收到“意想不到的安慰声明”

有人知道我如何在vue脚本中处理日志吗？我错过了什么吗

非常感谢

你可以试试

methods: {
 log(msg){
  console.log(msg); 
 }
}

当您想将内容写入控制台时，请使用：

{{ log(message) }}

---

我相信当您将它转到

json（）

时，您需要调用

return

，如下所示

.then(resp => return resp.json())

<script>
  export default{
  name: '',
  data(){
    return {

    }
  },
  methods:{

  },
  created() {

  }
}
</script>

也不确定您是否有输入错误，但您的

created（）

方法不应位于

methods

对象的内部

应该是这样的

.then(resp => return resp.json())

<script>
  export default{
  name: '',
  data(){
    return {

    }
  },
  methods:{

  },
  created() {

  }
}
</script>

---

使用async/await来帮助分解流程如何

export default {
  name: 'app',
  components: {
    Todos,
    Header,
  },
  data () {
    return {
      todos : []
    }
  },
  methods : {
    async created () {
      try {
        const resp = await fetch('https://jsonplaceholder.typicode.com/todos');
        const data = resp.json();
        // eslint-disable-next-line no-console
        console.log(data);
      } catch (err => console.error(err))
    }
  }
}

---

这在箭头函数中不起作用是正常的。 试试这个

已创建（）{
取（'https://jsonplaceholder.typicode.com/todos')
.then（resp=>resp.json（））
.then（功能（数据）{
控制台日志（数据）；
})
.catch（err=>err）
}

您能否提供一个，例如in？谢谢您的回答！我尝试过：但是，它崩溃了相同的错误：我无法在脚本中编写任何console.log：它总是返回相同的错误“意外的console语句”。我觉得用vue在控制台中记录内容是不对的，但我不明白为什么……感谢您的回答！与其他问题相比，这似乎是一个相同的问题：我无法在脚本中编写任何console.log：它总是返回相同的错误“意外的console语句”。我觉得使用vue在控制台中记录内容是不对的，但我不明白为什么……您使用的是linter？可能您已经设置了此规则，这就是您看到的错误：尝试在console语句之前的行中添加

//eslint disable next line no console

，以查看这是否修复了它。如果是这样，这是一个linting规则，而不是vue/javascript错误。你说得对！！它似乎解决了我的问题，但我现在有一个TypeError：无法读取未定义的属性“log”。你知道是什么导致了这个问题吗？奇怪。。。不确定是什么原因导致了这种情况，但请尝试其他一些控制台功能，如

console.warn

/

console.error

，并尝试在其他位置使用

console.log

（带有该注释以禁用过梁），然后查看这些功能是否有效。尽量缩小问题的范围。谢谢你的回答！但是，是console.log语句导致了问题：它无法运行我的任何脚本：如果我在vue组件中运行console.log，它将崩溃一个错误…这很奇怪，我不认为这是vue的问题。我一直在用它。嗨！同样的问题是console.log语句在脚本中似乎不起作用，这太奇怪了。。。