Javascript 如何在动态生成的VUEJ上使用事件处理程序

我正在生成一堆ul和v-for，就像这样

<div v-for="item in info">
  <ul>
    <li><a>{{item.number}}</a></li>
    <li><a>{{item.alphabet}}</a></li>
  </ul>
</div>

 export default {
      name: 'Zone',
      data(){
          return{
            info:'[
    {'alphabet':'a','number':1},
    {'alphabet':'b','number':2},
    {'alphabet':'c','number':3}
    ]'

          }
      },
   methods:{
   clicked:function(){
     console.log(this)
      //console.log(this.value)
       //console.log(this.text)
   }
 }
    }

---

我想在按下li时得到li元素的值。我尝试过使用“this”，但没有效果。如何在vueJS中解决此问题？您可以尝试将该项作为参数传递给函数。大概是这样的：

var vm = new Vue({
  el: '#app',
  data: {
    info: [{
      'alphabet': 'a',
      'number': 1
    }, {
      'alphabet': 'b',
      'number': 2
    }, {
      'alphabet': 'c',
      'number': 3
    }]
  },
  methods: {
    clicked: function(item) {
      // `this` inside methods points to the Vue instance
      console.log(item);
    }
  }
});

以及模板：

<div id="app">
  <ul>
    <li v-for="item in info">
      <a v-on:click="clicked(item)">{{item.number}}</a>
    </li>
  </ul>
</div>

.
您可以尝试将该项作为参数传递给函数。大概是这样的：

var vm = new Vue({
  el: '#app',
  data: {
    info: [{
      'alphabet': 'a',
      'number': 1
    }, {
      'alphabet': 'b',
      'number': 2
    }, {
      'alphabet': 'c',
      'number': 3
    }]
  },
  methods: {
    clicked: function(item) {
      // `this` inside methods points to the Vue instance
      console.log(item);
    }
  }
});

以及模板：

<div id="app">
  <ul>
    <li v-for="item in info">
      <a v-on:click="clicked(item)">{{item.number}}</a>
    </li>
  </ul>
</div>




.
您可以检查这个。您只需添加
@点击
ul上的


newvue({
el:“#应用程序”，
数据（）{
返回{
信息：[
{'alphabet'：'a'，'number'：1}，
{'alphabet'：'b'，'number'：2}，
{'alphabet'：'c'，'number'：3}
]
}
},
方法：{
点击（e）{
设el=e.target.innerHTML
console.log（'您点击了'，el）
}
}
})

{{item.number}

{{item.alphabet}

您可以检查这个。您只需添加
@点击
ul上的


newvue({
el:“#应用程序”，
数据（）{
返回{
信息：[
{'alphabet'：'a'，'number'：1}，
{'alphabet'：'b'，'number'：2}，
{'alphabet'：'c'，'number'：3}
]
}
},
方法：{
点击（e）{
设el=e.target.innerHTML
console.log（'您点击了'，el）
}
}
})

{{item.number}

{{item.alphabet}

newvue({
el:“#应用程序”，
数据：{
项目：[
{id:1，名称：'item1'}，
{id:2，名称：'item2'}，
{id:3，名称：'item3'}，
{id:4，名称：'item4'}，
{id:5，名称：'item5'}
]
},
方法：{
showInfo（e）{
console.log（'ID:'+e.target.getAttribute（'ID'））
console.log（'Content:'+e.target.textContent）
}
}
})

li{
边框：1px纯黑；
}

{{item.id}-{{item.name}

newvue({
el:“#应用程序”，
数据：{
项目：[
{id:1，名称：'item1'}，
{id:2，名称：'item2'}，
{id:3，名称：'item3'}，
{id:4，名称：'item4'}，
{id:5，名称：'item5'}
]
},
方法：{
showInfo（e）{
console.log（'ID:'+e.target.getAttribute（'ID'））
console.log（'Content:'+e.target.textContent）
}
}
})

li{
边框：1px纯黑；
}

{{item.id}-{{item.name}