Блог

Главная - Вопросы по программированию - Как получить идентификатор элемента с помощью директивы v-for vuejs?

Как получить идентификатор элемента с помощью директивы v-for vuejs?

#javascript #html #vue.js

#javascript #HTML #vue.js

Вопрос:

Я vue.js новичок, поэтому мне нужна помощь. Я пишу HTML-страницу, на которой отображается список объектов в простой таблице. Таблица создается скриптом, который получает объект JSON из сервлета и отображает его с помощью директивы v-for. В каждой строке таблицы есть кнопка, которую пользователь может нажать, чтобы записать объект, записанный в соответствующую строку, используя форму. Проблема в том, что я не знаю, как получить информацию об объекте, соответствующую выбранной строке, чтобы поместить ее в поля формы.

Это код:

 <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Repetition - catalog</title>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style2.css" />
    </head>
    <body>
        <header><h1>REPETITIONS.com</h1></header>
        <div id="app" class="float-container" style="height: 80%">
            <table class="catalog-table">
                <thead>
                    <tr>
                        <th style="width: 200px">Corso</th>
                        <th style="width: 250px">Docente</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                        <tr v-for="rep in reps">
                            <td>{{rep.teacherName}} {{rep.teacherSurName}}</td>
                            <td>{{rep.course}}</td>
                            <td>
                                <form action="/Repetition/controller/ServletController" method="post" id="i">
                                    <input type="hidden" name="operation" value="booking">
                                    <input type="hidden" name="id_t" value="rep.getId_teac"> <---set the value of the current row
                                    <input type="hidden" name="id_c" value="rep.getId_cor"> <---set the value of the current row
                                    <button type="submit">Book</button>
                                </form>
                            </td>
                        </tr>
                </tbody>
            </table>
        </div>

        <footer>xxxxxxx</footer>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <script>
            var app = new Vue ({
                el: '#app',
                data: {
                    repetitions: [],
                    link: '/Repetition/ServletController?operation=catalogamp;device=x'
                },
                mounted(){
                    this.getRepetitions()
                },
                methods:{
                    getRepetitions: function(){
                        var self = this;
                        $.get(this.link, function(data) {
                            self.repetitions = data;
                        });
                    }
                }
            });
        </script>
    </body>
</html>

В качестве альтернативы запросом формы можно управлять с помощью другого скрипта, но возникнет та же проблема.

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

1. Вы должны добавить информацию о том, как структурированы данные в вашем ‘rep’. Является ли он вложенным ( rep.course.id ), плоским ( rep.courseId ) или у вас есть какие-то другие средства для получения нужных идентификаторов (что бы getId_teac ни предполагалось делать)? Может быть, это так же просто, как использовать v-bind:value вместо value , но я не могу знать наверняка.

2. Да, извините, это плоско , как rep.courseId