Как добавить активный клас на элемент button, поменять его цвет и поменять цвет v-icon?

Question

[Денис]

Я совсем недавно стал изучать Vue и пробую реализовать редактор текста. Необходимо чтобы при этом чтобы активный клас снимался при двойном клике на кнопку и чтобы при клике на следующую кнопку активный клас не снимался с предыдущей, чтобы можно было видеть какие функции редактора сейчас активны на тексте + ко всему этому, помимо изменение стиля самого button необходимо поменять цвет v-icon при клике

methods: {
		formatDoc(cmd, value = null) {
			if (value) {
			document.execCommand(cmd, false, value);  
			} else {
				document.execCommand(cmd);
			}

<template>
<div class="container" id="app">
	<div class="toolbar">
				<div class="btn-toolbar">
					<div class="text-style">
						<button type="button" @click="formatDoc('bold')">
							<v-icon>mdi-format-bold</v-icon>
						</button>
						<button type="button" @click="formatDoc('underline')">
							<v-icon>mdi-format-underline</v-icon>
						</button>
						<button type="button" @click="formatDoc('italic')">
							<v-icon>mdi-format-italic</v-icon>
						</button>
					</div>
					<div class="text-align"></div>
						<button type="button" @click="formatDoc('justifyLeft')">
							<v-icon>mdi-format-align-left</v-icon>
						</button>
						<button type="button" @click="formatDoc('justifyCenter')">
							<v-icon>mdi-format-align-center</v-icon>
						</button>
						<button type="button" @click="formatDoc('justifyRight')">
							<v-icon>mdi-format-align-right</v-icon>
						</button>
					</div>
					<div class="text_list">
						<button type="button" @click="formatDoc('insertOrderedList')>
							<v-icon>mdi-format-list-numbered</v-icon>
						</button>
						<button type="button" @click="formatDoc('insertUnorderedList')
							<v-icon>mdi-format-list-bulleted</v-icon>
						</button>
					</div>
				</div>
		  </div>
	 </div>
</template>

Answer 1

[LJ322]

<template>
<button 
  type="button" 
  @click="formatDoc('bold')" 
  :style="styles.fontBold ? 'font-weight': 'bold' : 'font-weight: 'regular'"
  :class="{ 'button--active': styles.fontBold }"
>
  <v-icon>mdi-format-bold</v-icon>
</button>
</template>

<script>
export default {
  data() {
    return {
      styles: {
        fontBold: false,
      }
    }
  },

  methods: {
    formatDoc(cmd, value = null) {
      if (value) {
      document.execCommand(cmd, false, value);  
      } else {
        document.execCommand(cmd);
        switch(cmd) {
          case 'bold':
            this.styles.fontBold = !this.styles.fontBold;
            break;
        }
      }
    }
  }
}
</script>