CODEWITHSUNDEEP
javascriptvue.jsvue-component
mafortis
mafortis

Reputation: 7128

Vuejs get edited inputs

Logic

  1. I have checkboxes with inputs as label which values come from database so the text(value) is already exits. (done)
  2. I want to make a list of checked items (done)
  3. I want if I changed an item value get the changed value but it still gives me value of database (need help)

For better understanding here is some screenshots:

1

one

2

two

PS: If I change my input before checking the checkbox my value automatically jumps to default value (DB value)

Code

<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>

Any suggestions?

Upvotes: 3

Views: 400

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

Use v-model for the input text field

<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>

Upvotes: 2

Related Questions