Untitled

<!DOCTYPE html>
<html>
 <head>
   <title>!DOCTYPE</title>
   <meta charset="utf-8">
   <style>
   td{
    padding: 10px;
    border: 1px solid black;
    text-align: center;
   }
   td a{
    display: block;
    padding:20px;
   }
   td input{
    margin: 5px;
   }
   </style>
 </head>
 <body>
        <center>
            <div id="app" style="width: 800px;">

                    <table>
                        <tr>
                            <th>Товар</th>
                            <th>Цена</th>
                            <th>Количество</th>
                            <th>Сумма</th>
                            <th>Удалить</th>
                        </tr>

                        <template v-for="item, index in items">
                            <tr>
                                <td v-bind:style="{backgroundColor: item.nameBg}" v-if="!item.editName" v-on:click="editItem(index, 'name')">{{ item.name }}</td>
                                <td style="background-color: yellow" v-if="item.editName" v-on:keyup.enter="saveItem(index, 'name')"><input type="text" v-model="item.name"><br>press enter</td>

                                <td v-bind:style="{backgroundColor: item.priceBg}" v-if="!item.editPrice"  v-on:click="editItem(index, 'price')">{{ item.price }}</td>
                                <td style="background-color: yellow" v-if="item.editPrice" v-on:keyup.enter="saveItem(index, 'price')"><input type="text" v-model="item.price"><br>press enter</td>

                                <td v-bind:style="{backgroundColor: item.quantityBg}" v-if="!item.editQuantity" v-on:click="editItem(index, 'quantity')">{{ item.quantity }}</td>
                                <td style="background-color: yellow" v-if="item.editQuantity" v-on:keyup.enter="saveItem(index, 'quantity')"><input type="text" v-model="item.quantity"><br>press enter</td>

                                <td>{{ item.price * item.quantity }}</td>

                                <td><a href="#" v-on:click="delItem(index)">удалить</a></td>
                            </tr>
                        </template>


                    </table>

                    <div style="border: 1px solid black; margin: 20px;">ИТОГО: {{ summary() }}</div>

                    <form action="#">
                    <input type="text" v-model="name" placeholder="name">
                    <input type="text" v-model="price" placeholder="price">
                    <input type="text" v-model="quantity" placeholder="quantity">
                    <button v-on:click="addItem()" v-bind:disabled="name == '' || price == '' || quantity == ''">Добавить</button>
                    <p v-if="name == '' || price == '' || quantity == ''" style="color:red;">Вы не заполнили все поля</p>
                    </form>
            </div>
        </center>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <script>
        let app = new Vue({
            el: '#app',
            data: {
                items: [
                ],
                name: "",
                price: "",
                quantity: "",
                change: true,
            },
            methods:{
                changeBg: function(index,type,color){
                    switch(type){
                        case "name":
                            this.items[index].nameBg = color;
                            break;
                        case "price":
                            this.items[index].priceBg = color;
                            break;
                        case "quantity":
                            this.items[index].quantityBg = color;
                            break;
                    }
                },
                editItem: function(index, type){
                    switch(type){
                        case "name":
                            this.items[index].editName = true;
                            break;
                        case "price":
                            this.items[index].editPrice = true;
                            break;
                        case "quantity":
                            this.items[index].editQuantity = true;
                            break;
                    }
                },
                saveItem: function(index, type){
                    switch(type){
                        case "name":
                            this.items[index].editName = false;
                            this.changeBg(index, type, "green");
                            setTimeout(this.changeBg, 1000, index, type, "white");
                            break;
                        case "price":
                            this.items[index].editPrice = false;
                            this.changeBg(index, type, "green");
                            setTimeout(this.changeBg, 1000, index, type, "white");
                            break;
                        case "quantity":
                            this.items[index].editQuantity = false;
                            this.changeBg(index, type, "green");
                            setTimeout(this.changeBg, 1000, index, type, "white");
                            break;
                    }
                },
                delItem: function(index){
                    this.items.splice(index, 1);
                },
                addItem: function(){
                    item = {
                        name: this.name,
                        editName: false,
                        nameBg: "white",
                        price: this.price,
                        editPrice: false,
                        priceBg: "white",
                        quantity: this.quantity,
                        editQuantity: false,
                        quantityBg: "white",
                    };
                    this.items.push(item);
                    this.name = "";
                    this.price = "";
                    this.quantity = "";
                },
                summary: function(){
                    price = 0;
                    for (let item of this.items)price += item.price*item.quantity;
                    return price;
                },
            },
        });
   </script>

 </body>
</html>