Используя Vue.js, я пытаюсь добавить больше строк в мою таблицу нажатием кнопки, помеченной как Add new row.Строки таблицы содержат раскрывающиеся списки семантического пользовательского интерфейса.Все работает нормально, но я сталкиваюсь со следующими двумя проблемами:
- Чтобы анимация раскрывающегося меню семантического пользовательского интерфейса работала во вновь добавленной строке, я должен снова добавить выпадающий код javascript после нажатия
Add new row.Я включил код в эту ссылку: https://www.grillies.ca/ui.js. Вы также можете увидеть код, который я использую для добавления внешнего файла js для инициализации раскрывающегося списка ниже.Есть ли способ заставить анимацию работать без добавления внешних js после нажатия кнопки Add new row?Я должен использовать внешний js-файл, потому что он будет иметь много подобных функций для других элементов Semantic UI.Все, что я хочу, это не добавлять код javascript каждый раз, когда я динамически добавляю новый элемент Semantic UI. - Вторая проблема, с которой я сталкиваюсь, заключается в том, что при нажатии кнопки
Remove удаляется только последняя строка.Я хочу удалить только строку, для которой была нажата кнопка.
Я искал много ответов в StackOverflow, но не смог найти ничего похожего.Вот мой код:
// Vue js code starts
new Vue({
el: "#app",
data: {
languages: [{
name: "Learn JavaScript",
id: 1
},
{
name: "Learn Vue",
id: 2
},
{
name: "Play around in JSFiddle",
id: 3
},
{
name: "Build something awesome",
id: 4
}
],
rows: [1], //loops running by default
},
methods: {
addMoreCombination() { //function for adding more rows
this.rows.push({})
//script to append external js start here
let scriptForAppend = document.createElement('script')
scriptForAppend.setAttribute('src', 'https://www.grillies.ca/ui.js')
document.head.appendChild(scriptForAppend);
//script to append external js ends here
},
deleteRow(index) {
//function to remove that particular row
this.rows.splice(index, 1)
}
}
})
//Semantic UI js Code to initialize the HTML dropdown (also included in https://www.grillies.ca/ui.js for appending after each click)
$('.ui.dropdown').dropdown();
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<table class="ui celled table">
<tr v-for="(input, index) in rows" :key="index">
<td>
<select class="ui search dropdown">
<option value="">State</option>
<option v-for="language in languages" :key='language.id' :value="language.id">{{language.name}}</option>
</select>
</td>
<td>
<select class="ui search dropdown">
<option value="">State</option>
<option v-for="language in languages" :key='language.id' :value="language.id">{{language.name}}</option>
</select>
</td>
<td><button class="ui button red" @click="deleteRow(index)">Remove</button>
</td>
</tr>
</table>
<button type="button" class="ui basic button mb20 small" @click="addMoreCombination">
Add new row
</button>
</div>
</body>
</html>