Решить проблему со скобками в template?

Question

Создаю отдельный компонент. Проблема с тегом div там где скобки что не нравится компоненту, а именно template Тоесть проблема именно в template:

Vue.component('data-tag', {
		data() {
			return {
				dataend: '',
				days: ''
			}
		},
		template: `
		<div>
			<input type="date" placeholder="дата окончания" v-model="dataend">
			<div> {{days}} days</div>
			<div :class="`tab ${сolorTag}`"></div>
		</div>
		`,
		watch: {
			dataend(){
				this.deadline();
			}
		},
		methods: {
			deadline() {
				const msPerDay = 8.64 * Math.pow(10, 7);
				const abs = Date.parse(this.dataend) - Date.now();
				this.days = Math.ceil(abs/msPerDay);
			}
		},
		computed: {
			сolorTag() {
		        switch(true) {
		            case this.days > 60: {
		              return 'blue'
		            }
		            case this.days < 60 && this.days>14: {
		              return 'yellow'
		            }
		            case this.days < 14: {
		              return 'red'
		            }
		        }
			}
		}
	});
	new Vue({
		el: "#data-tag"		
	})

.tab {
width: 140px;
height: 80px;
background-color: #eee;
}
.red {background-color: red;}
.yellow {background-color: yellow;}
.blue {background-color: blue;}

<div id="data-tag">
<data-tag></data-tag>
</div>

Answer 1

Согласно документации Vue:

template используют шаблонные строки JavaScript, чтобы сделать многострочные шаблоны более читаемыми.

Таким образом, руководствуясь Шаблонными строками, вы вполне можете привести ваш код к виду:

    template: `
      <div>
        <input type="date" placeholder="дата окончания" v-model="dataend">
        <div> {{days}} days</div>
        <div class="tab" :class="сolorTag"></div>
      </div>
    `,

Vue.component('data-tag', {
  data() {
    return {
      dataend: '',
      days: ''
    }
  },
  template: `
      <div>
        <input type="date" placeholder="дата окончания" v-model="dataend">
        <div> {{days}} days</div>
        <div class="tab" :class="сolorTag"></div>
      </div>
    `,
  watch: {
    dataend() {
      this.deadline();
    }
  },
  methods: {
    deadline() {
      const msPerDay = 8.64 * Math.pow(10, 7);
      const abs = Date.parse(this.dataend) - Date.now();
      this.days = Math.ceil(abs / msPerDay);
    }
  },
  computed: {
    сolorTag() {
      switch (true) {
        case this.days > 60:
          {
            return 'blue'
          }
        case this.days < 60 && this.days > 14:
          {
            return 'yellow'
          }
        case this.days < 14:
          {
            return 'red'
          }
      }
    }
  }
});
new Vue({
  el: "#data-tag"
})

.tab {
  width: 140px;
  height: 80px;
  background-color: #eee;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="data-tag">
  <data-tag></data-tag>
</div>

Учтите, также

Эта возможность не поддерживается Internet Explorer (IE), поэтому если вам нужна поддержка IE и нет возможности использовать транспиляцию (например с помощью Babel или TypeScript), то используйте запись с обратными слэшами для многострочных шаблонов вместо них.

  template: '\
    <div>\
      <input type="date" placeholder="дата окончания" v-model="dataend">\
      <div> {{days}} days</div>\
      <div class="tab" :class="`tab ${сolorTag}`"></div>\
    </div>\
  ',

Vue.component('data-tag', {
  data() {
    return {
      dataend: '',
      days: ''
    }
  },
  template: '<div>\
			<input type="date" placeholder="дата окончания" v-model="dataend">\
			<div> {{days}} days</div>\
			<div class="tab" :class="`tab ${сolorTag}`"></div>\
		</div>\
		',
  watch: {
    dataend() {
      this.deadline();
    }
  },
  methods: {
    deadline() {
      const msPerDay = 8.64 * Math.pow(10, 7);
      const abs = Date.parse(this.dataend) - Date.now();
      this.days = Math.ceil(abs / msPerDay);
    }
  },
  computed: {
    сolorTag() {
      switch (true) {
        case this.days > 60:
          {
            return 'blue'
          }
        case this.days < 60 && this.days > 14:
          {
            return 'yellow'
          }
        case this.days < 14:
          {
            return 'red'
          }
      }
    }
  }
});
new Vue({
  el: "#data-tag"
})

.tab {
  width: 140px;
  height: 80px;
  background-color: #eee;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="data-tag">
  <data-tag></data-tag>
</div>

БЛОГ НА HUSL

Решить проблему со скобками в template?

Ответы (1 шт):