загрузочная редактируемая таблица возвращает значение в случае ошибки - PullRequest
Новая
       8

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

4 голосов
/ 30 апреля 2019

Я использую vue js и bootstrap-vue для создания редактируемой таблицы, пользователю разрешено вносить изменения в таблицу с помощью v-on: изменение помогает 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;
}

Ответы [ 2 ]

3 голосов
/ 02 мая 2019

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

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

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

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

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

...