редактируемая таблица bootstrap-vue возвращает значение в случае ошибки

Я использую vue js и bootstrap-vue для создания редактируемой таблицы, пользователю разрешено вносить изменения в таблицу с помощью v-on: change, помогая axios обновлять базу данных. Ограничение заключается в том, что языки уникальны и не могут быть пустой строкой, я не могу восстановить значение, если пользователь допустил ошибку. Каков рекомендуемый подход к этому? Любая помощь приветствуется.

Я попытался «обновить» таблицу, выполнив:

this.languages = this.languages;

Кажется, не обновляет значение в таблице.

раздел компонента vue на столе:

<b-table striped hover :items="filtered" :fields="fields">
    <template slot="name" slot-scope="data">
        <b-form-input type="text" :value="data.item.name" v-on:change="updateLanguage($event,data.item.id)"></b-form-input>
    </template>
</b-table>

в методах экспорта vue по умолчанию:

updateLanguage(e,id) {
    if(e.trim()){
        const find_langauge = this.languages.find(language=>{
            return language.name.toLowerCase() === e.toLowerCase();
        });
    find_langauge ? this.languages = this.languages : console.log('no match');
    } else {
        console.log('cannot be empty');
        this.languages = this.languages;
    }
}

в вычисленном:

filtered() {
    return this.search ? this.languages.filter(language=>
        language.name.toLowerCase().includes(this.search.toLowerCase())) : this.languages;
}

vue.js bootstrap-vue
person NewProgrammer    schedule 30.04.2019    source источник
comment
кто-нибудь знает, как поместить значение в событие в таблице? Я могу получить исходное значение из массива, если передам изменение всего объекта, а не только идентификатора   -  person NewProgrammer    schedule 01.05.2019
comment
e.target.value, похоже, не работает, поскольку e уже является полезной нагрузкой. Кто-нибудь знает, как настроить таргетинг на целевой элемент, чтобы я мог сделать $ event.target.value = this.item.name?   -  person NewProgrammer    schedule 01.05.2019
comment
Я попытался загрузить состояние языков из vuex в экземпляр this.languages, но не обновляет значение: во входном экземпляре.   -  person NewProgrammer    schedule 02.05.2019

Ответы (2)


arrow_upward
3
arrow_downward

Я не могу найти никакого решения для обновления: value, поэтому я вынужден был повторно выполнить рендеринг компонента. Не идеально, но, по крайней мере, обновился весь компонент. Будет признателен за любой лучший способ подойти к этому вместо повторного рендеринга.

person NewProgrammer    schedule 02.05.2019
comment
Как вы делаете повторный рендеринг? У вас есть образец кода? - person James A Mohler; 03.05.2019
comment
в родительском элементе добавьте: ключ к дочернему компоненту. в дочернем компоненте триггер v-on: yourFunc в родительском через $ emit, чтобы изменить значение в: key. это приведет к повторному рендерингу дочернего компонента. Я считаю, что в vue js есть документация по этому поводу, но это неправильное решение моей исходной проблемы. - person NewProgrammer; 04.05.2019
comment
У меня нет опыта работы с vue-bootstrap, но можно ли обернуть b-form-input в пользовательский компонент? Если это так, вы можете проверить ответ b-form-input и выдать либо исходное, либо измененное значение. - person retrograde; 04.05.2019
comment
bootstrap-vue действительно спасает жизнь, когда дело доходит до css, вы должны попробовать его! в любом случае проблема не в выдаче исходного и измененного значения, значение: value не реагирует на данные (что в данном случае хорошо). Кажется, я не могу использовать VUE, чтобы вернуть измененное значение обратно к данным, и мне посоветовали делать ванильную DOM - это не способ vue. - person NewProgrammer; 04.05.2019
comment
Я не должен понимать проблему, b / c кажется, что упаковка в пользовательский компонент позволит вам сохранить новое и старое значение и предотвратить любые изменения данных, если пользователь выберет недопустимый язык. Похоже, что другой вариант - использовать $ refs для получения значения ввода. Удачи. - person retrograde; 04.05.2019
comment
$ event в vue получит значение ввода, да, это сложная ситуация. Если классический DOM - это способ, то он должен быть таким. (/ facepalm) - person NewProgrammer; 04.05.2019

arrow_upward
0
arrow_downward

Vue не сохраняет «начальные» значения для входных данных, поскольку он полагается на ваши модальные данные как на источник истины.

Вам нужно будет сохранить начальное значение в данных, и при обнаружении сброса скопируйте это начальное значение обратно в v-модель, связанную с вводом.

Кроме того, если у вас есть входные данные в нескольких строках, рекомендуется установить уникальный key на входе, и или если у вас есть уникальное ключевое поле (где значение уникально для каждой строки элемента), установите primary-key prop на b-table чтобы он генерировал уникальный Vue key для каждого элемента TR.

person Troy Morehouse    schedule 13.05.2019