如何在黎使用事件处理程序生成的动态vuejs

Question

我产生了一堆UL的V型像这样

<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) 
    } 
} 
    } 

我想VUE组件在li被按下时获取li元素的值。我尝试过使用'this'，但没有帮助。我应该如何解决这个问题vueJS

Answer 1

你可以尝试将项目作为参数传递给你的函数。事情是这样的：

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> 

通知，这个clicked方法内指Vue的实例作为评论指出。

结账this fiddle。

Answer 2

您可以检查。你只需要在你的ul

new Vue({ 
 
    el: '#app', 
 
    
 
data() { 
 
    return { 
 
     info: [ 
 
     {'alphabet':'a','number':1}, 
 
     {'alphabet':'b','number':2}, 
 
     {'alphabet':'c','number':3} 
 
     ] 
 
    } 
 
}, 
 
    
 
methods: { 
 
    clicked (e) { 
 
    let el = e.target.innerHTML 
 
     console.log('you clicked on ', el) 
 
    } 
 
} 
 
    
 
})

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script> 
 
<div id="app"> 
 
<div v-for='item in info'> 
 
    <ul @click='clicked($event)'> 
 
    <li>{{ item.number }}</li> 
 
    <li>{{ item.alphabet }}</li> 
 
    </ul> 
 
</div> 
 
</div>

爵士小提琴上@click添加

Answer 3

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    items: [ 
 
     {id: 1, name: 'item1'}, 
 
     {id: 2, name: 'item2'}, 
 
     {id: 3, name: 'item3'}, 
 
     {id: 4, name: 'item4'}, 
 
     {id: 5, name: 'item5'} 
 
    ] 
 
    }, 
 
    methods: { 
 
    showInfo (e) { 
 
     console.log('ID: ' + e.target.getAttribute('id')) 
 
     console.log('Content: ' + e.target.textContent) 
 
    } 
 
    } 
 
})

li { 
 
    border: 1px solid black; 
 
}

<div id="app"> 
 
    <ul> 
 
    <li 
 
     v-for="item in items" 
 
     :key="item.id" 
 
     :id="item.id" 
 
     @click="showInfo"> 
 
     {{ item.id }} - {{ item.name }} 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>