javascript - 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 绑定在 todoli组件中，而你的methods是定义在todoli的父组件中

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

这篇关于javascript - vue.js,我想把自定义组件里面的函数写到methods里面，但不成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！