如何在 Vue 的 v-for 循环中控制台记录项目

Posted 2023-02-16

【中文标题】如何在 Vue 的 v-for 循环中控制台记录项目

【英文标题】：How to console.log an item inside a v-for loop in Vue

【发布时间】：2019-06-02 07:29:41

【问题描述】：

我不知道如何通过console.log 来查看ul 中的项目正在传递。

 <div v-for="(item, index) in todos" :key="index">
     <ul v-if="item" :load="console.log(item)">
         <li v-for="(value, key) in item" :key="key">
            <label v-bind:for="key"> key </label>
            <div v-bind:id="key"> value </div>
         </li>
     </ul>
 </div>

 var vm = new Vue(
    el: '#components-demo',
    data: 
        todos: [
            newData
        ]
    
 )

【问题讨论】：

它应该只是显示，你应该看看模板输出的 html，我认为控制台日志在这里有点矫枉过正

我想我也需要未来的努力，我需要知道如何去做

【参考方案1】：

你应该定义一个类似的方法：

  <ul v-if="item" :load="log(item)">

在你的脚本中：

var vm = new Vue(
  el: '#components-demo',
  data: 
    todos: [
      newData
    ]
  ,
  methods: 
    log(item) 
      console.log(item)
    
  
)

【讨论】：

要全局使用，在main.js中添加Vue.prototype.log = console.log;

【参考方案2】：

我通常将我正在调试的值包装在 <pre> myData </pre> 中，如下所示：

<div v-for="(item, index) in todos" :key="index">
     <pre> item </pre>
     <ul v-if="item" :load="item">
         <li v-for="(value, key) in item" :key="key">
            <label v-bind:for="key"> key </label>
            <div v-bind:id="key"> value </div>
         </li>
     </ul>
 </div>

但是如果在创建过程中将控制台传递到模板上下文中，也可以使用控制台

 <div v-for="(item, index) in todos" :key="index">
     <ul v-if="item" :load="console.log(item)">
         <li v-for="(value, key) in item" :key="key">
            <label v-bind:for="key"> key </label>
            <div v-bind:id="key"> value </div>
         </li>
     </ul>
 </div>

 var vm = new Vue(
    el: '#components-demo',
    data: 
        todos: [
            newData
        ]
    ,
    created() 
      this.console = window.console;
    
 )

【参考方案3】：

与丹尼尔的回答类似，但您可以简单地在数据对象中引用console

data()
  return 
  console, //ES6
  ...