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 交通频道 作文范文 时光的遗忘 新中国成立了 腊八节短信祝福精编 我爱读书的作文精选650字 为何不能放弃过去? 女政工师先进事迹材料(煤矿) 不望国耻,振兴中华 学报告心得体会 邮政个人鉴定 假如我是一个削笔刀作文200字 经典空间说说大全 人尽其责作文900字 钉纽扣250字 劈山救母的故事 2013年人事局工作总结及明年工作打算 碎花的记忆(3)作文900字 心灵之憩 我们班的百灵鸟作文 甘愿承担 回到桃花源的陶渊明作文750字 难道连最后的爱都要剥夺吗? qq空间一句话短语 如何组织创业团队 关于申请经费的请示 大自然轻快的节奏 看一场露天电影作文300字 秋季学期开学典礼校长讲话稿 不孤单、 雪的情怀 村党支部带领全村干部群众发展致富纪事 站在建安古城的脚下 请别把她弄丢了 小学五年级作文600字:当清洁工不在的时候 让小鸡游泳 元宵节的祝福——送给亲朋好友的祝福 十条微原则 苦难才是人生的营养 侠与盗的界限 属于我的那颗流星 生命因挫折而芬芳 寻·品·问 还在痛…… 回忆·爱 小学五年级作文350字:我爱驼子爸爸 人生像是个碰碰车 运动会的日记 经典古代诗句 窃符救赵的故事 你的纯真,让我记住了你 我的“自画像”作文300字

Copyright © 2016 phpStudy |