<textarea
@keypress.enter.prevent="input.length && newMessage()"
id="chat_msg"
placeholder=""
v-model="input"
>
</textarea><body>
<svg xmlns="http://www.w3.org/2000/svg" height="238.5" width="272.7" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 272.70001 238.5">
<path fill="#7C90A0" d="m195.8 17.933c23.3 0 42.2 98.3 42.2 219.7h34c0-130.7-34.3-236.5-76.3-236.5-24 0-45.2 31.7-59.2 81.5-14-49.8-35.2-81.5-59-81.5-42 0-76.2 105.7-76.2 236.4h34c0-121.4 18.7-219.6 42-219.6s42.2 90.8 42.2 202.8h33.8c0-112 19-202.8 42.3-202.8"/>
</svg>
</body>
calculatorIsOn становится ложным из-за let calculatorIsOn = false;?
isActive. Ну и кстати, для разворачивания табов не обязательно использовать какие-то data- атрибуты. Ну и плюс в темплейте у тебя верстка неполная какая-то, тэги не закрыты, например.<template>
<div>
<li v-for="(item, index) in itemsVisibility"
:data-rel="`ex-${index}`"
@click="expand(index)"></li>
<div v-for="(item, index) in itemsVisibility"
v-show="itemsVisibility[index]"
:class="{ active: itemsVisibility[index] }"
:data-rel="`ex-${index}`"
@mouseleave="expand(index)"></div>
</div>
</template>
<script>
export default {
data() {
return {
itemsVisibility: [
true, // первый таб по дефолту открыт
false,
false,
],
};
},
methods: {
expand(index) {
this.itemsVisibility[index] = !this.itemsVisibility[index];
},
},
};
</script>watch: {
'$route.params.list_slug': function (listSlug) {
console.log(listSlug); // выводим новое значение параметра роута
this.doSomething(); // выполняете что нужно
},
},watch: {
'$route': function (to, from) {
// выполняем что-либо, когда роут меняется
},
},<img src='someUrl' ref="picture">
<button type="button" @click="getImageSrc()">Get source</button>
...
methods: {
getImageSrc() {
this.yourVariable = this.$refs.picture.getAttribute('src');
},
},<p v-for="n in 40">{{ n }}</p><p v-for="n in 40">{{ n + 29 }}</p>