vue中自定义标签给绑定事件函数传值

Question

刚接触vue
我自定义了一个标签menu_item

Vue.component('menu_item',{
                props:['todo'],
                //template:'<li onclick="menuTo()">{{todo.text}}</li>',
                template:'<li onclick="menuTo()">{{todo.text}}</li>',
            })
            var menu = new Vue({
                el:"#vue_list",
                data:{ 
                    menu_list:[
                        {id : 0,text: '第一项',address: 'http://www.4399.com'},
                        {id : 1,text: '第二项',address: 'http://www.7k7k.com'},
                        {id : 2,text: '第三项',address: 'http://www.baidu.com'},
                    ],
                },
            })

---

 <div class="mes_menu_list" id="vue_list">
            <ul>
                <menu_item v-for="item in menu_list"
                v-bind:value="item.address"
                v-bind:todo="item"
                ></menu_item>
            </ul>
        </div>

在浏览器控制台中也是解析成了li标签

<li onclick="menuTo()" value="http://www.4399.com">第一项</li>

但是后面menuTo()点击事件函数始终获取不了这个value中存的地址

function menuTo() {
    var address = $("#vue_list li").value;
    alert(address);
    $("#index_content").attr("src", address);
}

浏览器弹窗就是说这个变量未定义

各位大佬 这是什么原因造成的呀，怎么解决呢？

Answer 1

$("#vue_list li")返回的是个数组，而且去某个元素的值用val()或text()

可以这个做

Vue.component('menu_item',{
   props:['todo'],               
   template:'<li @click="menuTo(todo.address)">{{todo.text}}</li>',
   methods:{
    menuTo: function (address) {    
    alert(address);
    $("#index_content").attr("src", address);
    }
   }
});