在vue.js中如何获取v-for里的值啊

Question

如下代码:

<template>
    <li v-for='list in lists' @click='to'>
        {{list}}
    </li>
</template>
<script>
    data(){
        return {
            lists:[]
        }
    },
    ready(){
        ajax(
          //get请求赋值给lists,请求后有5个li
        )
    },
    methods:{
        to():{
        ajax('url',id:list)//我点击第三个li,想获取list和id值,然后ajax去post,发送id,响应,再返回给params,然后路由跳转
        router.go({name:'index/:listid'},params:{listid:响应的值'})
    }
</script>

假设5个li是5个办公室,办公室有名字,不是办公室1办公室2,而是前台办公室之类的.我点前台办公室,就请求post然后进入,显示里面的人员,第一次做请求post跳转路由..感觉思路是这样不知道对不对,求大神指点,详细点,谢谢

Answer 1

click事件可以传递参数 to（list）

Answer 2

默认methods中的方法，第一个参数是vue包装过的event，其中event.target就是原生的Element；
比如：

<a id="test" @click="handle">点我</a>

methods:{
   handle(event) {
      let el = event.target;
      
      let id = el.getAttribute('id');
      
      console.log(el, id);
   }
}

根据以上思路，你可以设置a标签的data属性进行数据缓存，点击的时候，获取当前dom元素的dataset数据即可。
比如：

<a data-name="aaa" @click="handle">点我</a>

methods:{
   handle(event) {
      let el = event.target;
      let dataset = el.dataset;
      let name = dataset.name;
      
      console.log(name);
   }
}

Answer 3

<li v-for='list in lists' @click='to'>
    {{list}}
</li>

{{list}}如果是一个对象 = {name:''}可以通过list.name获取
官方api http://cn.vuejs.org/guide/list.html