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如何点击标签显示对应的内容呢



快速导航

Copyright © 2016 phpStudy |