Why is the button click handler not working in the generated list component?

Question

JavaScript

Good afternoon, comrades! I started to learn vue.js and the following question arose
. There is such a markup with a list of 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>

On a certain event, a component is added to the rooms-list list like this:

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>';
                }

If I click on the button in this component, then the method does not work. There are no errors in the console. What needs to be fixed?

Answer 1

Don't use html in lists...

<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>