Uncaught ReferenceError: changeImportant is not defined

128

09 октября 2021, 05:00

Я делаю простую todo программу с помощью vue.js, при запуске программа выдаёт ошибку: Todo.html:125 Uncaught ReferenceError: changeImportant is not defined Помогите исправить и объясните пожалуйста, что не так.

    <!DOCTYPE html> 
 
    <html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Document</title> 
        <style> 
            body{ 
                margin: 0; 
                font-family: 'Arial', sans-serif; 
                font-size: 18px; 
                color:#35495e; 
            } 
 
            .container{ 
                width: 700px; 
                margin: auto; 
            } 
 
            ul{ 
                margin: 0; 
                padding: 0; 
                list-style: none; 
            } 
 
        li{ 
                display: block; 
                border: 2px solid #41b782; 
                margin: 10px 0; 
                padding: 10px 20px; 
                cursor: pointer; 
            } 
 
            li:hover{ 
                background: #5cb88f33; 
            } 
         
            textarea, input[type="text"]{ 
                padding: 5px 2px; 
                width: 400px; 
                border: 1px solid #35495e; 
                border-radius: 5px; 
                 
                font-family: 'Arial', sans-serif; 
                font-size: 15px; 
            } 
         
        </style> 
    </head> 
    <body> 
         
        <div class="container" id="app"> 
            <h4>Новая заметка:</h4> 
            <input id="input" type="text" size="40"> 
                <button v-on:click="addElement()">Добавить!</button> 
                 
            <h2>Дела на сегодня:</h2> 
             
             
            <table> 
                <li v-for="item in todo"> 
                    {{ item.name }} 
                    <br><br> 
                     
                    <input id=getRangeID() type="range" step="1" min="1" max="3" list="rangeList" value="1" oninput="changeImportant(item.id,this.value)"> 
    <!--                <input id=getRangeID() type="range" step="1" min="1" max="3" list="rangeList" value="1" oninput="todo[item.id-1].importance=this.value;">--> 
                    <datalist id="rangeList"> 
                    <option value="1" label="1"> 
                    <option value="2" label="2"> 
                    <option value="3" label="3"> 
                    </datalist> 
                    Важность дела: 
                    <span>{{ item.importance }}</span> 
                     
            </table> 
                
                
        </div> 
         
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
         
        <script> 
            var text; 
            new Vue({ 
                el: '#app', 
                data: { 
                    todo:[ 
                          {id: 1, importance: 1, name: 'Решить ДЗ'}, 
                          {id: 2, importance: 1, name: 'Изучить документацию Vue.js'}, 
                          {id: 3, importance: 2, name: 'Сварить макароны'}, 
                          {id: 4, importance: 2, name: 'Купить молоко'}, 
                          {id: 5, importance: 3, name: 'Перейти на Linux'}, 
                    ], 
                }, 
                    methods: { 
                        addElement(){ 
                            text = document.getElementById("input").value; 
                            if(text!=""){ 
                                this.todo.push({id: this.todo.length+1, name: text, importance: 1}); 
                                document.getElementById("input").value = ""; 
                            } 
                        }, 
                        changeImportant(id,value){ 
                            this.todo[id-1].importance=value; 
                        } 
                    } 
                     
            }) 
        </script> 
    </body> 
    </html>