Почему входное значение Vue.js не обновляется? - PullRequest
Новая
       27

Почему входное значение Vue.js не обновляется?

0 голосов
/ 21 мая 2019

У меня есть компонент Vue.js text-input, подобный следующему: 

<template>
    <input
        type="text"
        :id="name"
        :name="name"
        v-model="inputValue"
    >
</template>

<script>
    export default {
        props: ['name', 'value'],
        data: function () {
            return {
                inputValue: this.value
            };
        },
        watch: {
            inputValue: function () {
                eventBus.$emit('inputChanged', {
                    type: 'text',
                    name: this.name,
                    value: this.inputValue
                });
            }
        }
    };
</script>

И я использую этот text-input в другом компоненте следующим образом: 

<ul>
    <li v-for="row in rows" :key="row.id">
        <text-input :name="row.name" :value="row.value">
        </text-input>
    </li>
</ul>

Тогдав JS компонента, использующего text-input, у меня есть код, подобный следующему для удаления li строк: 

this.rows = this.rows.filter((row, i) => i !== idx);

Метод filter правильно удаляет строку с индексом idx из массива rows и в родительском компоненте, я могу подтвердить, что строка действительно пропала, однако, если у меня есть, например, две строки, первая со значением 1, а вторая сзначение 2, а затем я удаляю первую строку, хотя оставшаяся строка имеет значение 2, я все еще вижу 1 в текстовом поле.

Почему?Я не понимаю, почему Vue.js не обновляет значение ввода текста, хотя значение value явно меняется с 1 на 2, и я могу подтвердить это в родительском компоненте.

Возможно, я просто не понимаю, как работают Vue.js и v-model, но похоже, что значение ввода текста должно обновиться.Любой совет / объяснение будет принята с благодарностью.Спасибо.

Ответы [ 2 ]

0 голосов
/ 21 мая 2019

Вы не можете изменять значения между такими компонентами.

Вот пример кода о том, как правильно передавать значения вперед и назад.Вам нужно будет использовать вычисленный установщик / получатель.Добавлена ​​кнопка, чтобы изменить значение и отразить его обратно в экземпляр.Он работает в обоих направлениях. 

<template>
    <div>
        <input type="text" :id="name" v-model="inputValue" />
        <button @click="inputValue='value2'">click</button>
    </div>
</template>
<script>
    export default {
        props: ['name', 'value'],
        computed: {
            inputValue: {
                get() {
                    return this.value;
                },
                set(val) {
                    this.$emit('updated', val);
                }
            }
        }
    }
</script>

Обратите внимание, что событие @updated обновляет локальную переменную с обновленным значением: 

    <text-input :name="row.name" :value="row.value" @updated="item=>row.value=item"></text-input>
0 голосов
/ 21 мая 2019

Из вашего кода вы пытаетесь прослушать изменения .. в данных v-модели .. // Ваши компоненты Vue 

<template>
    <input
        type="text"
        :id="name"
        :name="name"
        v-model="inputValue"
    >
</template>

<script>
    export default {
        props: ['name', 'value'],
        data: function () {
            return {
                inputValue: ""
            };
        },

    };
</script>

Если Вы действительно хотите слушать изменения .. 

<ul>
    <li v-for="row in rows" :key="row.id">
        <text-input @keyup="_keyUp" :name="row.name" :value="row.value">
        </text-input>
    </li>
</ul>

в файле вашего компонента 

<template>...</template>
<script>
    export default {
        props: ['name', 'value'],
        data: function () {
            return {
                inputValue: ""
            };
        },
        methods : {
    _keyUp : () => {// handle events here}

    };
</script>

проверьте здесь события на входе здесь

Чтобы привязать значение из реквизита ..

получить значение реквизита, затем присвоить его переменной 'inputValue'

будет отображаться в элементе ввода

...