Vuejs 获得编辑的输入

Question

逻辑

1. 我有带有输入标签的复选框，其中值来自数据库，因此文本（值）已经存在。 （完成）
2. 我想列出检查项目（完成）
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>