Indermove
@Indermove
C#/.NET back-end разработчик

Почему не работает обработчик клика по кнопке в сгенерированном компоненте списка?

Добрый день, товарищи! Начал изучать vue.js и возник следующий вопрос
Есть вот такая разметка со списком rooms-list:
<div class="col s4">
            <a class="collection-header"><h4>Rooms List</h4></a>
            <ul id = "rooms-list" class="collection" v-html="rooms">
            </ul>
        </div>


При определенном событии в список rooms-list добавляется компонент вот так:
if(msg.Raw.isCreated == true)
                {
                    self.rooms += '<li class="collection-item"><div>'+msg.Raw.roomName+'<button v-on:click="enterRoom(\''+msg.Raw.roomName+'\')"></button></div>';
                }


Если я кликаю на кнопку в этом компоненте, то метод не срабатывает. В консоли никаких ошибок при этом нет. Что нужно исправить?
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
Urichalex
@Urichalex
Кратко о себе)
Не использовать html в списках...
<template>
	<div class="col s4">
		<a class="collection-header"><h4>Rooms List</h4></a>
		<ul id = "rooms-list" class="collection">
			<li v-for="(room, index) in rooms" :key="index" @click="myMethod(room)">{{room}}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'qqqq',
		data() {
			return {
				rooms: [
					'room1',
					'room2',
					'room3',
					'room4',
				]
			}
		},
		methods: {
			addRoom(name) {
				this.rooms.push(name);
			}
		}
	}
</script>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы