javascript - vue.js,我想把自定义组件里面的函数写到methods里面,但不成功
本文介绍了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屋!
查看全文