Vue encapsulates a search component, there is a problem

clipboard.png

component code:

<template>
    <el-input 
        v-model="val"
        :placeholder="tip" 
        size="small" 
        clearable 
        @keyup.enter.native="echo()">
    </el-input>
</template>

<script>
export default {
    props:["tip"],
    data () {
        return {
            val:""
        }
    },
    methods:{
        echo:function(){
            alert(val)
        }
    }
}
</script>

Why do you always prompt: val is not defined? every time you press enter? Haven"t I already defined val

The

alert (this.val)


function has an independent scope. When you pop up val , you will only look in the function scope to see if this variable is defined.


Pop up defective: alert (this.val) or @ keyup.enter.native= "echo (val)" to pass parameters

Menu