这么还没秃啊
2020-09-21 17:33
采纳率: 0%
浏览 507

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

刚接触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);
}

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

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

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • jingluan666 2020-09-21 18:27

    $("#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);
        }
       }
    });
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题