Some things worth recording in the course of learning the course of the official website of Vue

Keywords: Javascript Vue

Today, I saw a very interesting thing in the learning process on the official website. The specific effect is as follows:

The html code is as follows
`<div id="app">

    <label>
        //Tag name: < input type = "text" V-model = "content" placeholder = "for example: work, learning" >
    </label>
    <button @keyup.enter="addlist">Add tags</button><br>
    <ul>
        <li v-for="(item,index) in datalist" :key="item.id">
           {{index}} {{item.something}} <button @click="remove(index)">delete</button>
        </li>
    </ul>

</div>`

js code is as follows

var app = new Vue({
        el:"#app",
        data(){
            return{
                content:'',
                datalist:[
                    {id:0,something:'Zhao Xin Na'},
                    {id:1,something:'Jhon Sena'},
                    {id:2,something:'visual studio code'},
                ],
                nextId:3,
            }
        },
        methods:{
            addlist(){
                this.datalist.push(
                    {id:this.nextId++,something:this.content}
                )
                this.content=''
            },
            remove(index){
                this.datalist.splice(index,1)
                console.log(index)
            }
        },
        created() {
            var lett=this;
            document.onkeydown=function(e){
                var key=window.event.keyCode;
                if(key==13){
                  lett.addlist();
                }
            }
        },
    })

Among them, there is a key modifier on the official website

When listening for keyboard events, we often need to check common key values. Vue allows you to add key modifiers for v-on when listening for keyboard events

I added @ keyup.enter to the code. However, it's useless to press enter. You need to get a focus first before you can press the key to trigger. Of course, Baidu's solution is to add a keyboard event in created

    created() {
            var lett=this;
            document.onkeydown=function(e){
                var key=window.event.keyCode;
                if(key==13){
                  lett.addlist();
                }
            }
        },

It's ok.

Posted by user___ on Mon, 02 Dec 2019 00:24:07 -0800