Как удалить элемент массива при клике на кнопку?

Для удаления элемента массива во Vue.js при клике на кнопку, необходимо использовать метод splice().

Сначала создайте массив данных в вашем экземпляре Vue:

data: {
  items: ['пункт 1', 'пункт 2', 'пункт 3']
}

Затем, в вашем HTML-шаблоне, создайте цикл, который перебирает элементы массива и отображает их на странице. В этом цикле добавьте кнопку, при нажатии на которую будет происходить удаление элемента:

<ul>
  <li v-for="(item, index) in items">
    {{ item }}
    <button @click="removeItem(index)">Удалить</button>
  </li>
</ul>

В методах вашего экземпляра Vue определите функцию removeItem(index), которая будет удалять элемент массива по указанному индексу:

methods: {
  removeItem(index) {
    this.items.splice(index, 1);
  }
}

В данном случае метод splice() принимает два параметра: индекс элемента, который нужно удалить, и количество элементов, которые необходимо удалить после этого индекса. В нашем случае удаляется только один элемент с индексом index.

После нажатия на кнопку элемент будет удален из массива, и представление будет автоматически обновлено, так как Vue.js следит за изменениями в данных и обновляет представление соответствующим образом.

<ul>
  <li>пункт 1<button @click="removeItem(0)">Удалить</button></li>
  <li>пункт 2<button @click="removeItem(1)">Удалить</button></li>
  <li>пункт 3<button @click="removeItem(2)">Удалить</button></li>
</ul>

Таким образом, при клике на кнопку элемент массива будет удален, и представление будет обновлено, отражая это изменение.