Как отобразить v-if div, взяв за условие значение из объекта на странице?

Question

[geometria]

На одной из страниц сайта есть див, значение в котором равно 92. Как отобразить header если условие верно?

<template>
 <div class="container">

<div v-if="app_id === 92" style="border: solid 1px green; height:20px;">
<VmHeader></VmHeader>
</div>

  </div>
</template>

<script>
import VmHeader from './header/Header';
var app_id = document.getElementById("app_id").innerHTML;

  export default 
  {

components: {
VmHeader
}, 

data() {
   return {
app_id: null,
     } 
}, 
    
}
</script>

Comments

[Ярослав Иванов]

var app_id = document.getElementById("app_id").innerHTML

За такое у нас на районе по лицу бьют

Ну кто так делает? С клиента ничего не надо забирать. Клиент только для отображения. Все надо хранить в data в данном примере

Answer 1

[Alex]

data() {
   return {
app_id: null,
     } 
}, 

mounted() {
this.app_id = document.getElementById("app_id").innerHTML;
}

<div v-if="app_id === '92'" style="border: solid 1px green; height:20px;">
<VmHeader></VmHeader>
</div>

Answer 2

[Aetae]

Т.е. vue у вас впердюлено на обычную страницу?

Ну, например, как-то так:

mounted() {
  this.app_id = +document.getElementById("app_id").innerHTML;
}

Comments

[geometria]

впердюлено - не впердюлено, а работать должно!

Answer 3

[0xD34F]

<div v-if="showHeader">

data: () => ({
  showHeader: +document.querySelector('#app_id').innerHTML === 92,
}),