vue.js,我想把自定义组件里面的函数写到methods里面,但不成功


我把文档里面的案例改了,想把自定义组件里面的函数写到methods里面,但是不成功。文档上的案例做出来的效果是往输入窗口里面输入文本,回车后文本添加到列表,窗口里面的文本清空,点击列表里面的文本后面的按钮,列文本删除。我改了之后就只剩下个输入框了。。。。。
谢谢。

<script src="vue.js"></script>

<div id="app">
    <input type="text" v-model="newText" v-on:keyup.enter="addText" placeholder="add text"/>
    <hr/>
    <ol>

        <todoli v-for="(item,xindex) in words" v-bind:word="item" v-bind:index="xindex"></todoli>
        <!-- 
            文档里面的todoli是这样写的
        <todoli v-for="(item,index) in words" v-bind:word="item" v-on:remove="words.splice(index,1)"></todoli>

         -->
    </ol>
</div>

<script>
    Vue.component('todoli',{
            props:['word','index'],
            template:'<li>{{word}}<button v-on:click="remove">X</button></li>'
            /*
            文档里面的组件是这样写的
            props:['word'],
            template:'<li>{{word}}<button v-on:click="$emit(\'remove\')">X</button></li>'
            */
    })
    var app=new Vue({
        el:"#app",
        data:{
            newText:'',
            words:[
                'Do the dishes',
                'Take out the trash',
                'Mow the lawn'
            ]
        },
        methods:{
            addText:function(){
                this.words.push(this.newText),
                this.newText=""
            },
            //原本文档里面没有这个
            remove:function(){
                this.words.splice(this.index,1)
            }
        }
    })
</script>

都报错了当然只剩下个输入框!
remove的方法应该写在下面:

Vue.component('todoli',{
    props:['word','index'],
    template:'<li>{{word}}<button v-on:click="remove">X</button></li>'
    methods:{
        remove(){...}
    }
})

你的 remove 绑定在 todoli组件中,而你的methods是定义在todoli的父组件中

把 remove 定义在 todoli 组件中
https://jsfiddle.net/ycloud/c...



相关阅读:
vue activate and deactivate
ajax请求异常问题
if...else if..else第三句不执行?
一个简单的react-router报错,无从着手
数组使用join拼接失败,求看一下
Hive向表里导入数据是不是会在HDFS上生成新文件及多个副本?
为什么有时候把代码压缩之后应用就不能正常运行了?
如何阻止h5body的滑动
webpack+react打包后的文件如何在Apache服务器上部署?
mysql优化的常用方法有哪些??
html接收res.render数据
JavaScript要是不用 <script src="***.js"> ,只用 js 自身,能导入 别的js 文件吗?
请问seajs怎样引进非CMD的框架?
centos7.2安装php7.1后配置listen的问题
有哪些预测算法可以根据实时增量数据更新算法并预测后续数据?
蚂蚁金服的calendar组件怎么赋值
对于“Javascript天生异步“这句话不太理解
请问datagrip怎么创建数据库?
spring BeanFactory getbean方法是怎么搜索出对应的类的
antdesign的menu如何点击标签显示对应的内容呢



快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 世界卫生日宣传活动总结 什么是话题作文250字 浅谈怎样加强新时期人民调解工作 乐于助人的文具们 2015会计毕业生实习报告 谈“选择” 字词练习[表一]第301-400条 初中初一作文700字:瞧,那美丽的家乡 16岁的那些事… 小金鱼的由来作文500字 小学六年级作文550字:温馨的清晨 公司员工工作总结及心得体会 2016年学校基建科科长年终总结 谁给岁月上了弦,弹奏流年的曲 鲁望以躬掇野蔬兼示雅什,用以酬谢 电影剪辑-------一个故事 失恋的朋友看看 小学六年级作文350字:军棋 毕业论文指导教师评语参考 描写石榴花的好词好句好段大全 世界还缺少爱心作文300字 2015军训总结 梦回故乡作文500字 2012年10月20日 19时36分45秒 《我的大学路》读后感 2015用公式法分解因式教学反思 小学五年级作文450字:春天的故事 街头流离 十七岁的心事 街道2016年劳动与社会保障工作总结 忧伤的飞鸟(转载)作文500字 寻找感动600字 作文 我,又回到了那里 酒店前台接待实习报告范文 肩膀上的意义550字 大雪无情人有情作文400字 自动处理垃圾的机器人 一直这样下去作文1000字 2015最新经典励志句子 软榻香花,未妨惆怅 看不见的牺牲者 眼泪作文200字 我们被时间吞噬着,却忘记了自己该做什么 月夜美景 《端午的鸭蛋》教学设计及反思 难忘的回忆650字 我爱家乡的松花江 圣经名言妙语309句 周瑜 函授毕业生自我鉴定600字

Copyright © 2016 phpStudy |