Как выполнить условную отрисовку внутри template компонента VueJS?

Question

[moskwin68]

Как отрисовать span id="wrong" при var wrong = true;

<div id="controls">
 <font-size-number target="headline" value="30" min="20" max="50"></font-size-number>
</div>

Vue.component('font-size-number', {
 props: [ 'target', 'min', 'max'],
 template: '<p><input type="number" @input="onChange" v-bind:id="`${target}-number`" class="set"><span id="wrong">Неверное значение</span></p>',
 methods: {
  onChange(e) {
   if (e.target.value < Number(this.min) | e.target.value > Number(this.max)) {
     var wrong = true;
     console.log(wrong);
   } 
  },
 },
});

new Vue({ 
  el: '#controls',
});

Comments

[Андрей Хохлов]

попробуйте начать работу с Vue с чтения прекрасной, переведённой на русский язык документации https://ru.vuejs.org/v2/guide/

Answer 1

[0xD34F]

Можно ли получать высшее образование, не имея среднего? Очевидно, нет. А осваивать фронтенд-фреймворк, не имея базовых знаний html/js? Судя по показанному коду, вы не в курсе, что атрибуты id должны иметь уникальные значения (<span id="wrong"> в шаблоне компонента - а если экземпляров компонента будет несколько?), путаетесь с операторами - использовали побитовое ИЛИ там, где должно было быть логическое. Может, стоит подождать с vue и подтянуть основы?

А если отвечать непосредственно на ваш вопрос... Ну, держите.