I want to put "backticks" around my template strings.
IntelliJ keeps removing them every time I try the wrap them around the string.
Anyone's got a clue why its happening and how to solve this?
I added a little code snippet of my .vue file where the problem occurred. Imagine html, js and css written down in one component (.vue) file, separated by unique tags (template, script and style tag). I am using a german keyboard layout with the Mac OS X 10.5+ keymap.
import axios from "axios";
import 'vue-animate/dist/vue-animate.min.css';
export default {
name: 'hello',
data () {
return {
msg: `Service is <strong>ONLINE</strong> and <strong>READY</strong> to operate`,
clicked: false,
iconURL:"./../../static/img/meditate.svg",
meditationAction: this.activateMeditation,
backgroundImage: "",
room:"Bad"
}
},
methods:{
activateMeditation () {
this.clicked = !this.clicked;
axios.get(`http://localhost:5005/${this.room}/shuffle/on`).then(response => {
console.info("SUCCESSFULLY ACTIVATED SHUFFLE");
axios.get(`http://localhost:5005/${this.room}/volume/20`).then(response => {
console.info("SUCCESSFULLY SET VOLUME TO 20");
axios.get("http://localhost:5005/bad/sleep/900").then(response => {
console.info("SUCCESSFULLY SET SLEEP TIME TO 15 MINUTES");
axios.get("http://localhost:5005/bad/playlist/med").then(response => {
console.info("SUCCESSFULLY SET PLAYLIST TO MED");
this.iconURL = "./../../static/img/stop.svg";
this.meditationAction = this.pausePlayback;
axios.get("http://localhost:5005/bad/state").then(response => {
console.info("SUCCESSFULLY RETRIEVED STATE");
console.log(response);
//FIXME: USE IMAGE OF CURRENT TRACK INSTEAD OF NEXT TRACK
this.backgroundImage = response.data.nextTrack.absoluteAlbumArtUri;
})
.catch((error)=>{
console.log(error);
});
})
.catch((error)=>{
console.log(error);
});
})
.catch((error)=>{
console.log(error);
});
})
.catch((error)=>{
console.log(error);
});
})
.catch((error)=>{
console.log(error);
this.iconURL = "./../../static/img/attention.svg";
this.meditationAction = this.resetButton;
});
},
pausePlayback() {
axios.get("http://localhost:5005/bad/pause").then(response => {
console.info("SUCCESSFULLY PAUSED PLAYBACK");
this.iconURL = "./../../static/img/meditate.svg";
this.meditationAction = this.activateMeditation;
this.backgroundImage = "";
})
.catch((error)=>{
console.log(error);
});
},
resetButton() {
this.iconURL = "./../../static/img/meditate.svg";
this.meditationAction = this.activateMeditation;
}
}
} * {
box-sizing: border-box;
}
.logo {
max-width:50%;
}
.svg {
height:5em;
z-index:100;
}
.option .svg .st0 {
fill: white;
stroke: white;
}
.options__container {
display:flex;
justify-content: center;
align-items: center;
width:100%;
}
.option {
display:flex;
justify-content: center;
align-items: center;
height:3em;
width:3em;
position:relative;
background-size:cover;
padding:3em;
border-radius:100%;
background-color:white;
border-top:3px solid black;
border-bottom:5px solid #303030;
border-left:3px solid black;
border-right:7px solid #303030;
transition: all 300ms ease-in;
}
.option__background-image {
position:absolute;
background-color:white;
opacity:0.8;
top:0;
left:0;
height:100%;
width:100%;
border-radius: 100%;
}
.option:hover {
border:3px solid black;
} <div class="hello">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Sonos_2015-Logo.png"/>
<h2 v-html="msg"></h2>
<div class="options__container">
<a class="option" v-on:click="meditationAction" v-bind:class="{'animated flash' : clicked}" :style="{backgroundImage: 'url(' + backgroundImage +')'}" >
<div class="option__background-image" ></div>
<img class="svg" :src=iconURL>
</a>
</div>
</div>
