Почему не работает код, Vue.js?

Question

[Василий Кузин]

Я только начал разбираться во Vue.js, поэтому не судите строго. Возникла такая проблема: не работает метод pickFont. Вот 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
    }
  }
})

Вот 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>

Работает все, кроме метода. Точнее он работает частично — если я допишу в конце alert(Что-то), то оповещение он выдаст, пропустив все, что было до этого.
Как это исправить? Заранее спасибо!

Answer 1

[Дмитрий Беляев]

Мне кажется нужно сначала разобраться в JS
Рассмотрим Ваш метод построчно:

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

Повангую, и предположу, что Вы хотите поменять данные, тогда нужно так:

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

Comments

[Василий Кузин]

Спасибо! Понял свою ошибку. Первые две строчки теперь срабатывают, но последняя — нет. Если я прописываю в консоль браузера constructorSection.FPisActive = false;, то переменнаяFPisActive меняется, а в данном случае нет. В чем может быть дело?

[Дмитрий Беляев]

Василий Кузин, а как Вы поняли, что методом она не меняется?

[Василий Кузин]

Дмитрий Беляев, после выполнения метода проверил через консоль:

[DmitryWL]

Дмитрий верно все написал. Дополню.
у вас div с функцией вложен в div где по клику true присваивается.
поменяйте местами

<div class="FP-Item" id="FP-1" v-bind:class="{ opened: FPisActive }" v-on:click="pickFont('Academia')">Academia</div>

и
</div>

[Василий Кузин]

DmitryWL, спасибо, помогло! Не понимаю, как я этого не заметил...

Answer 2

[Артем]

Не знаток Vue, тоже только учусь, но предположу, что с методом что-то не то:

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

Comments

[Василий Кузин]

Не помогло((

[Артем]

Василий Кузин, ну я примерно наметил
функция должна что-то возвращать или что-то делать
может вот так?

fontFamily = font;
currentFont = font;
FPisActive = false;

[Артем]

Артем, двоеточие там явно не в тему, оно только в объектах используется
и запятые тоже

[Василий Кузин]

SyntaxError: Unexpected token '='. Expected a ':' following the property name 'fontFamily'.

Это если изменить двоеточие на =

Answer 3

[PloAl]

проблема в синтаксисе js

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

Comments

[Василий Кузин]

Не помогло, точно также пропускает все эти пункты, но выполняет alert()