Why is the code not working, Vue.js?

Question

Vue.js

I just started to understand Vue.js, so don't judge too harshly. There was such a problem: the method does not work pickFont. Here is the JS:

var constructorSection = new Vue({
  el: '.constructorSection',
  data: {
    sign: '',
    signStyle: {
      fontFamily: 'Montserrat, sans-serif'
    },
    FPisActive: false,
    currentFont: 'Выберите шрифт надписи'
  },
  methods: {
    pickFont: function (font) {
      fontFamily: font,
      currentFont = font,
      FPisActive = false
    }
  }
})

Here is the HTML:

<input type="text" class="signInput" placeholder="Введите вашу надпись" v-model="sign">

<h4>Шрифт</h4>
<div class="fontPicker" id="fontPicker" v-bind:class="{ opened: FPisActive }" v-on:click="FPisActive = true">
    <div class="FP-Placeholder" id="FP-Placeholder" v-bind:class="{ opened: FPisActive }">
        {{ currentFont }}
        <img src="img/expandArrow.svg" alt="" style="float: right; margin-right: 15px;">
    </div>
    <div class="FP-Item" id="FP-1" v-bind:class="{ opened: FPisActive }" v-on:click="pickFont('Academia')">Academia</div>
</div>

Everything works except the method. More precisely, it works partially - if I add at the end alert(Что-то), then it will issue a notification, skipping everything that was before.
How to fix it? Thanks in advance!

Answer 1

It seems to me that you need to understand JS first
. Consider your method line by line:

fontFamily: font,
// создали метку  fontFamily, которая здесь бесполезна,
// далее бесполезное обращение к переменной,
// далее оператор запятая
currentFont = font,
// тут вроде бы должны присвоить значение font в currentFont
// так как currentFont нигде не объявлено - будет ошибка
// ну и опять оператор запятая, а значит не фига в currentFont не будет font
FPisActive = false
// а будет там результат вот этого выражения, то есть false
// опять же FPisActive не объявлено - ошибка

I’ll guess, and I’ll assume that you want to change the data, then you need to do this:

pickFont: function (font) {
      this.signStyle.fontFamily = font;
      this.currentFont = font;
      this.FPisActive = false;
}

Answer 2

Not a Vue connoisseur, I’m also just learning, but I’ll assume that something is wrong with the method:

pickFont: function (font) {
    return { fontFamily: font,
      currentFont: font,
      FPisActive: false
    }
}

Answer 3

js syntax problem

pickFont: function (font) {
    fontFamily = font;
    currentFont = font;
    FPisActive = false;
}