The function in vue reacts to pressing any keys, how to fix it?

K

Katrina24102021-09-03 21:04:13

Vue.js

Katrina2410, 2021-09-03 21:04:13

HTML code:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <link rel='stylesheet' href='style.css'>
    <script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
    <div class="container" id="app">
        <div class="card">
            <h1>{{title}}</h1>
            <h3>Колличество записей: {{counter}}</h3>
            <div class="form-control">
                <input type="text" :placeholder="placeholderString" :value="inputValue" @input="inputChangeHandler" @keypress.enter="addNewNote" autofocus/>
            </div>
            <button class="btn" @click="addNewNote">добавить</button>
            <hr/>
            <ul class="list">
                <todo-item class="list-item" v-for="(item,index) in notes" :todo="item" :index="index" :del="delNote(index)"></todo-item>
            </ul>
        </div>
    </div>
    <script src='App.js' type='text/javascript'></script>
</body>
</html>

Vue.js code:

var dataURL = "docs.json"

const one = {
    data(){
        return{
            counter:0,
            placeholderString:"Введите название заметки",
            title:"Список заметок",
            inputValue:"",
            postFontSize: 1,
            notes:[]      
        }
    },
    created() {
        document.addEventListener('keydown', this.onKeyDown)
    },
    beforeDestroy() {
        document.removeEventListener('keydown', this.onKeyDown)
    },
    methods:{
        inputChangeHandler(event){
        this.inputValue = event.target.value
        },
        addNewNote(){
            this.notes.push(this.inputValue);
            this.inputValue = "";
            this.counter++;
            console.log("add");
        },
        delNote(index){
            this.notes.splice(index, 1);
            console.log(index);
        }

    }
}
const app = Vue.createApp(one)

app.component('todo-item', {
  props: ['todo','index','del'],
  template: `
  <li> {{ todo }}
    <div class = "btn-list">
        <button class="btn" @click="">V</button>
        <button class="btn danger" @click="del(index)">X</button>
    </div>
  </li>`
})

app.mount('#app')

When adding an item to the list by pressing enter or the "Add" button, it automatically calls the delNote () function and immediately after adding it deletes it, and then continues to call it when any key is pressed. If I change the function on the delete button to the add function, then it goes into an infinite loop. At what initially everything worked correctly, in the process such a problem appeared, rolled back, the problem remains.
Please tell me what could be the problem?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

shmatuan, 2021-09-03
@shmatuan

@del="delNote"
// вместо
// :del="delNote(index)"

<button class="btn danger" @click="$emit('del', index)">X</button>