Блог

Главная - Вопросы по программированию - Alpine Js не синхронизирует данные для x-текста и x-модели, если они используются в цикле в строке таблицы

Alpine Js не синхронизирует данные для x-текста и x-модели, если они используются в цикле в строке таблицы

#javascript #alpine.js

Вопрос:

Я пытаюсь перебрать массив сотрудников и хочу показать зарплату сотрудника и поле ввода для редактирования зарплаты сотрудника. Проблема в том, что Alpine не синхронизирует данные из поля ввода с текстовым элементом. Пример:

 <tbody>
    <template x-for="employee in employees">
        <tr>
            <td>
                <input x-model="employee.basic_salary">
            </td>
            <td x-text="employee.basic_salary"></td>
        </tr>
    </template>
</tbody>

<script>
function data() {
    return {
        employees: [
            {id:1, basic_salary: 6000},
            {id:2, basic_salary: 7000},
        ]
    }
}
</script>

Ответ №1:

template должен быть 1 прямой потомок элемента. Так что упаковка его содержимого в a div должна сделать свое дело.

     <template x-for="user in users">
      <div>
        <p x-text="user.name"></p>
        <input type="text" x-model="user.name">
      </div>
    </template>

Я полагаю, что ваша разметка заставила бы alpine зарегистрировать предупреждение.

Комментарии:

1. Хорошо, спасибо, я попробую это сделать.

2. Это то, что у меня есть в реальном проекте. Я использую <tr> вместо (у меня есть таблицы данных в этой таблице) Если я добавлю <div> перед <div><tr>, это уничтожит данные таблиц данных и не покажет строки. <template x-for="employee in employees"> <tr> <td> <input type="number" class="form-control" x-bind:name=" basic_salary[${employee.id}] " x-model="employee.basic_salary"> </td> <td> <span x-text="employee.basic_salary"></span> </td> </tr> </template>

3. Да, это потому div , что разбивает таблицы, если вы обернете все внутри шаблона, <tr> разве это не сработает?

4. Нравится <template><tr><template>other stuff</template></tr></template> ?. Нет, это не помогает.

5. <template><tr>other stuff</tr></template>

Ответ №2:

Я попытался переместить внутреннюю часть, и это работает, но это ломает стол, поэтому он работает не так, как ожидалось:( Вот что я попробовал:

 <template x-for="employee in employees">
    <tbody>
        <tr>
            <td>
                <input x-model="employee.basic_salary">
            </td>
            <td x-text="employee.basic_salary"></td>
        </tr>
    </tbody>
</template>

<script>
function data() {
    return {
        employees: [
            {id:1, basic_salary: 6000},
            {id:2, basic_salary: 7000},
        ]
    }
}
</script>

Никогда не следует ставить петлю перед <tbody>

Метки: ,