Как динамически добавить шаблон в Vue 3

Я пытаюсь настроить компонент Vue 3, который динамически добавляет строки в таблицу. Пока что у меня есть следующее:

 <template>
    <table>
        <tbody>
            <tr v-for = "(item, index) in tableRows" :key = "item.id">
                <td>D{{item.id}}</td>
                <td><input type = "text" v-model = "item.Filename"></td>
                <td><input type = "text" v-model = "item.ImageTitle"></td>
                <td><input type = "text" v-model = "item.Caption"></td>
            </tr>
        </tbody>
    </table>
   <button @click.stop = "insert_Row">add row +</button>
   
   <div v-for = "item in tableRows" :key = "item.id">
     {{item}}
   </div>  
</template>
    
<script>
export default {
  data() {
    return {
    tableRows: [
      {
        "id": 1,
        "Filename": "test",
        "ImageTitle": "test",
        "Caption": "test"
      }
    ]
    }
  },
  methods: {
    insert_Row() {
      this.tableRows.push(
        {
        "id": this.tableRows.length+1,
        "Filename": "",
        "ImageTitle": "",
        "Caption": ""
      }
      )
    }
  }
}
</script>

Однако приведенное выше настроено на включение начальной строки по умолчанию перед нажатием кнопки добавления. Я хочу настроить это так, чтобы первая строка также динамически добавлялась при нажатии кнопки. Как я могу это сделать?

[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный
JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...
Подъем в javascript
Подъем в javascript
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
0
0
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возможно, я слишком упрощаю, но если вы хотите, чтобы строки таблицы не отображались до тех пор, пока не будет нажата кнопка, то почему бы просто не удалить строку фиктивных данных, которые у вас есть в массиве tableRows?

Измените это:

data() {
    return {
        tableRows: [
            {
               "id": 1,
               "Filename": "test",
               "ImageTitle": "test",
               "Caption": "test"
             }
        ]
    }
},

К этому:

data() {
    return {
        tableRows: []
    }
},

Другие вопросы по теме