How to optimize a simple vue application?

Question

Vue.js

Пожалуйста не смейтесь, только начал осваивать vue, от слова вообще - компонетны, шаблоны - следующий этап. Пока главное вникнуть и понять суть.
Вот есть такое приложение, проблема в том, что я для каждой строки сделал свой отдельный метод. Сразу же хотел сделать один метод, выбирать и подставлять соответствующие элементы из массива.
Ну и так же точно с размерами шрифта.
Но что то не срабатывает - возможно, есть какие то особенности работы с массивами в vue, в которых еще не разобрался?

Answer 1

Badly:

<div class="color-label red" @click="color = '#FB253E', textColor = '#ffffff' , strokeColor = '#ffffff';"></div>
<div class="color-label green" @click="color = '#19AD6A' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div>
<div class="color-label orange" @click="color = '#FC6621' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div>
<div class="color-label blue" @click="color = '#1386a3' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div>
<div class="color-label yellow" @click="color = '#FFED00' ,textColor = '#111111' , strokeColor = '#111111';"></div>
<div class="color-label lightgreen" @click="color = '#00ff00' ,textColor = '#111111' , strokeColor = '#111111';"></div>
<div class="color-label white" @click="color = '#ffffff' ,textColor = '#111111' , strokeColor = '#111111';"></div>

It is better:

<div
  v-for="n in colors"
  :class="[ 'color-label', n.name ]"
  @click="onColorClick(n.values)"
></div>

data: () => ({
  colors: [
    { values: [ '#FB253E', '#FFF', '#FFF' ], name: 'red' },
    { values: [ '#19AD6A', '#FFF', '#FFF' ], name: 'green' },
    { values: [ '#FC6621', '#FFF', '#FFF' ], name: 'orange' },
    { values: [ '#1386A3', '#FFF', '#FFF' ], name: 'blue' },
    { values: [ '#FFED00', '#111', '#111' ], name: 'yellow' },
    { values: [ '#00FF00', '#111', '#111' ], name: 'lightgreen' },
    { values: [ '#FFFFFF', '#111', '#111' ], name: 'white' },
  ],
  ...
}),
methods: {
  onColorClick([ color, textColor, strokeColor ]) {
    Object.assign(this, { color, textColor, strokeColor });
  },
  ...
},

Badly:

<tspan x="0" y="-10" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': firstLineFontSize }">{{ firstLine }}</tspan>
<tspan x="0" y="17" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': secondLineFontSize }">{{ secondLine }}</tspan>
<tspan x="-2" y="45" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': thirdLineFontSize }">{{ thirdLine }}</tspan></text>
...
<input type="text" placeholder="enter 1 text line" @input="changeFirstLine">
<input type="number" value='25' @input="changeFirstLineFontSize"><span> px </span>
<input type="text" placeholder="enter 2 text line" @input="changeSecondLine">
<input type="number" value='18' @input="changeSecondLineFontSize"><span> px </span>
<input type="text" placeholder="enter 2 text line" @input="changeThirdLine">
<input type="number" value='18' @input="changeThirdLineFontSize"><span> px </span>

data: {
  firstLine: 'Your',
  secondLine: 'custom',
  thirdLine: 'text',
  firstLineFontSize: '25',
  secondLineFontSize: '18',
  thirdLineFontSize: '18',
  ...
},
methods: {
  changeFirstLine: function(event) {
      this.firstLine = event.target.value;
  },
  changeSecondLine: function(event) {
      this.secondLine = event.target.value;
  },
  changeThirdLine: function(event) {
      this.thirdLine = event.target.value;
  },
  changeFirstLineFontSize: function(event) {
      this.firstLineFontSize = event.target.value;
  },
  changeSecondLineFontSize: function(event) {
      this.secondLineFontSize = event.target.value;
  },
  changeThirdLineFontSize: function(event) {
      this.thirdLineFontSize = event.target.value;
  },
  ...

It is better:

<tspan
  v-for="n in lines"
  v-text="n.text || n.placeholder"
  :x="n.x"
  :y="n.y"
  :style="{ 'font-size': n.fontSize }"
  text-anchor="middle"
  alignment-baseline="middle"
  font-family="'Swiss721BT-RomanCondensed'"
></tspan>
...
<template v-for="(n, i) in lines">
  <input type="text" v-model="n.text" :placeholder="`enter ${i + 1} text line`">
  <input type="number" v-model="n.fontSize"><span> px </span>
</template>

data: () => ({
  lines: [
    { x:  0, y: -10, fontSize: 25, placeholder: 'Your' },
    { x:  0, y:  17, fontSize: 18, placeholder: 'custom' },
    { x: -2, y:  45, fontSize: 18, placeholder: 'text' },
  ],
  ...
}),

Answer 2

https://ru.vuejs.org/v2/guide/forms.html
v-model