我想在我的模板字符串周围加上“反引号” 。
每次我尝试将它们缠绕在字符串上时，IntelliJ都会不断删除它们。
任何人都知道它为什么会发生以及如何解决这个问题？
我在出现问题的地方添加了我的 .vue 文件的一小段代码。想象一下将 html、js 和 css 写在一个组件 ( .vue) 文件中，由唯一的标签（模板、脚本和样式标签）分隔。我正在使用带有 Mac OS X 10.5+ 键盘映射的德语键盘布局。
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>