Vue

by Sergei Sokolov

HTML

<div id="app">
  <h2>Нерешённые вопросы:</h2>
  <ol>
    <li class="place-card" :class="{ inactive: !place.active }" v-for="(place, index) in places" :key="place.item">
      {{ place.item }}
      <button class="btn place-card__btn place-card__btn_del" @click="remove(place)">
        Удалить
      </button>
    </li>
  </ol>
  
  <div v-if="modal">
    Я модалка! {{ modal }}
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

/**
 * для вопроса https://qna.habr.com/q/1043946
 * Как изменить код, чтобы работало?
 */
new Vue({
  el: "#app",
  data: {
    modal: null,
    places: [
      { item: "a", active: false },
      { item: "b", active: false },
      { item: "c", active: false },
    ]
  },
  methods: {
  	remove: function(place){
    	this.places.splice(this.places.indexOf(place), 1);
      this.modal = place.item;
    }
  }
})