Element-UI динамически добавляет строки таблицы - PullRequest
Новая
       42

Element-UI динамически добавляет строки таблицы

0 голосов
/ 13 апреля 2020

Я использую Vue. js и Element-UI. Мне нужно отправить ответ в базу данных, и как только я получу ответ, я хочу отобразить данные в виде таблицы. Вот моя таблица (minimalisti c пример c): 

<el-table :data="ingredients" height="2000">
  <el-table-column prop="name" label="Name" width="200"></el-table-column>
  <el-table-column prop="quantity" label="Quantity in 100g" width="110"></el-table-column>
</el-table>

И вот мой запрос: 

watch: {
    ingredients: {
        immediate: true,
        handler: async function () {
            if (this.ingredients.length > 0) {
                await axios.get('../ingredient/get/' + this.ingredients[this.ingredients.length - 1]).then(response => {
                    let ingredient = JSON.parse(response.data.ingredient);
                    ingredient['quantity'] = 1;
                    this.ingredients[this.ingredients.length - 1] = ingredient;
                })
            }
        }
    }
}

Проблема, с которой я сталкиваюсь, по-видимому, заключается в том, что я Мне нужно сделать это в наблюдателе, потому что мой элемент выбора выглядит следующим образом, что приводит к тому, что таблица не замечает изменения достаточно быстро. Как только я добавляю другой элемент, таблица видит изменение и показывает первый элемент, но не второй: 

<el-select v-model="ingredients" multiple filterable remote
           placeholder="Search for ingredients" :remote-method="searchIngredient"
           :loading="loading" style="width: 100%">
    <el-option v-for="ingredient in searchIngredients" :key="ingredient.id"
               :label="ingredient.name" :value="ingredient.id"/>
</el-select>

Затем метод searchIngredient выполняет запрос к базе данных и отвечает на список совпадающих ингредиентов

...