javascript - Vuejs 获取编辑后的输入

Question

逻辑

1. 我有带有输入作为标签的复选框，其值来自数据库，因此文本(值)已经存在。 (完成)
2. 我想列一份检查项目 list (完成)
3. 我想如果我改变了一个项目的值得到改变的值，但它仍然给我数据库的值(需要帮助)

为了更好地理解这里是一些截图:

1

2

PS:如果我在选中复选框之前更改我的输入，我的值会自动跳转到默认值(DB 值)

代码

<template>
    <div class="input-group mb-3 active" v-for="(value, key, index) in list" :key="index">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" v-model="checkedFiles" :id="index" :value="value" aria-label="Checkbox for following text input" >
            </div>
        </div>
        <input type="text" :value="value" :id="index" class="form-control" aria-label="Text input with checkbox">
    </div>

    <button class="btn btn-success btn-sm" v-show="isVisible" @click="generate">Generate List</button>
</template>

<script>
    export default {
        name: "directories-component",
        data() {
            return {
                list: [],
                checkedFiles: [],
            }
        },
        methods: {
            getTheList() {
                //....
                this.list = res.data.data;
                //....
            },
            generate(e) {
                e.preventDefault();
                console.log(this.checkedFiles);
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

有什么建议吗？

Answer 1

对输入文本字段使用v-model

<div class="input-group mb-3 active" v-for="(val, index) in list" :key="index"> // removed key from iterator since list is an array
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" v-model="checkedFiles[index]" :id="index" aria-label="Checkbox for following text input" > // removed the :value attribute
            </div>
        </div>
        <input type="text" v-model="list[index]" :id="index" class="form-control" aria-label="Text input with checkbox"> // Change added
    </div>