title: how I pass a dynamic value to use in a v-if in the parent?
body: <p>I need &quot;showIMP&quot; to be passed to the parent whenever it updates, it updates when the screen width size changes. For some reason @resize=&quot;switchShow&quot; is not getting the function, I would also like to know how I could pass this value on to the father, whenever he changes.</p>
  <p>If any one can help &lt;3</p>
  <p>father</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;Cadastro :caminho=&quot;caminho&quot; :nomeEntidade=&quot;nomeEntidade&quot;/&gt;
          &lt;/div&gt;
  
          &lt;ValidationObserver ref=&quot;observer&quot; v-slot=&quot;{ handleSubmit }&quot;&gt;  
              &lt;Formulario&gt; 
                  &lt;div class=&quot;columns is-multiline&quot;&gt;
                      &lt;div class=&quot;column is-full-mobile is-two-fifth&quot;&gt;
                          &lt;VInput rules=&quot;required|max:100&quot; type=&quot;text&quot; label=&quot;Nome&quot; v-model=&quot;servidor_smtp.nome&quot;/&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;column is-full-mobile is-one-fifth&quot;&gt;
                          &lt;VSelect :itens=&quot;[{value:'1', text:'Produção'}, {value:'2', text:'Homologação'}, {value: 3, text:'Desenvolvimento'}]&quot;
                              label=&quot;Tipo&quot; itemValue=&quot;value&quot; itemText=&quot;text&quot; v-model=&quot;servidor_smtp.ambiente&quot;/&gt;
                      &lt;/div&gt;
                      
                      &lt;div class=&quot;column is-full-mobile is-one-fifth&quot;&gt;
                          &lt;VSelect :itens=&quot;[{value:'1', text:'Interno'}, {value:'2', text:'Externo'}]&quot;
                              label=&quot;Tipo&quot; itemValue=&quot;value&quot; itemText=&quot;text&quot; v-model=&quot;servidor_smtp.tipo&quot;/&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;column is-full-mobile is-narrow&quot;&gt;
                          &lt;div class=&quot;columns is-multiline&quot;&gt;
                              &lt;div class=&quot;column is-full-mobile is-narrow&quot;&gt;
                                  &lt;VSwitch label=&quot;Usa TLS?&quot; trueValue=&quot;Sim&quot; falseValue=&quot;Não&quot; size=&quot;is-medium&quot; v-model=&quot;servidor_smtp.usar_tls&quot;/&gt;
                              &lt;/div&gt;
  
                              &lt;div class=&quot;column is-full-mobile is-narrow&quot;&gt;
                                  &lt;VSwitch label=&quot;Ativo&quot; trueValue=&quot;Ativo&quot; falseValue=&quot;Inativo&quot; size=&quot;is-medium&quot; v-model=&quot;servidor_smtp.ativo&quot;/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;column is-full-mobile is-one-fifth&quot;&gt;
                          &lt;VSelect :itens=&quot;[{value:'1', text:'Produção'}, {value:'2', text:'Homologação'}, {value: 3, text:'Desenvolvimento'}]&quot;
                              label=&quot;Tipo&quot; itemValue=&quot;value&quot; itemText=&quot;text&quot; v-model=&quot;servidor_smtp.ambiente&quot;/&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;column is-full-mobile is-one-fifth&quot;&gt;
                          &lt;VSelect :itens=&quot;[{value:'1', text:'Interno'}, {value:'2', text:'Externo'}]&quot;
                              label=&quot;Tipo&quot; itemValue=&quot;value&quot; itemText=&quot;text&quot; v-model=&quot;servidor_smtp.tipo&quot;/&gt;
                      &lt;/div&gt;   
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;columns is-multiline&quot;&gt;
                      &lt;div class=&quot;column is-full-mobile is-one-quarter&quot;&gt;
                          &lt;VInput rules=&quot;required|max:100&quot; type=&quot;text&quot; label=&quot;Host&quot; v-model=&quot;servidor_smtp.host&quot;/&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;column is-full-mobile is-one-quarter&quot;&gt;
                          &lt;VInput rules=&quot;required|max:4&quot; type=&quot;number&quot; label=&quot;Porta&quot; v-model=&quot;servidor_smtp.porta&quot;/&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;column is-full-mobile is-one-quarter&quot;&gt;
                          &lt;VInput rules=&quot;required|max:100&quot; type=&quot;text&quot; label=&quot;Usuário&quot; v-model=&quot;servidor_smtp.usuario&quot;/&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;column is-full-mobile is-one-quarter&quot;&gt;
                          &lt;VInput rules=&quot;required|max:100&quot; type=&quot;password&quot; label=&quot;Senha&quot; password-reveal v-model=&quot;servidor_smtp.senha&quot;/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Formulario&gt;
  
              &lt;div&gt;
                  &lt;CaixaBotoes @salvar=&quot;handleSubmit(salvar)&quot; caminhoVoltar=&quot;/cadastros/servidor-smtp/listagem&quot;/&gt;
              &lt;/div&gt;
          &lt;/ValidationObserver&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ValidationObserver } from 'vee-validate'
  import Formulario from '~/components/Formulario'
  import VSwitch from '~/components/inputs/VSwitch'
  import VSelect from '~/components/inputs/VSelect'
  import VInput from '~/components/inputs/VInput'
  import CaixaBotoes from '~/layouts/CaixaBotoes'
  import Cadastro from '~/layouts/Cadastro'
  import apiClient from '@/utils/apiClient'
  import notification from '@/utils/notification'
  
  export default {
      name: 'CadastroServidorSmtp',
  
      components: {
          ValidationObserver,
          VInput,
          Formulario,
          VSwitch,
          VSelect,
          Cadastro,
          CaixaBotoes
      },
  
      // props:{
      //     showIMP:{
      //         type: Boolean
      //     }
      // },
  
      computed: {
          caminho() {
              return this.$store.state.servidorSmtp.caminho
          }
      },
      
      data() {
          return {
              servidor_smtp: {
                  id: this.$route.query.id,
                  nome: null,
                  ativo: true,
                  ambiente: 1,
                  tipo: 1,
                  host: null,
                  porta: null,
                  usuario: null,
                  senha: null,
                  usar_tls: false,
              },
              nomeEntidade: 'Servidor SMTP'
          }
      },
  
      methods: {
          async salvar() {
              try {
                  if (this.servidor_smtp.id) {
                      await apiClient.updateServidorSmtp(this.servidor_smtp)
                  } else {
                      await apiClient.createServidorSmtp(this.servidor_smtp)
                  }
  
                  this.$router.push({ path: '/cadastros/servidor-smtp/listagem', query: { success: true} })
              } catch (err) {
                  notification.sendNotification('Ocorreu um erro ao salvar, tente novamente!', 'is-danger', 5000)
              }
          }
      },
  
      async created() {
          if(this.servidor_smtp.id) {
              try {    
                  this.servidor_smtp = await apiClient.getServidorSmtpById(this.servidor_smtp.id)
              } catch (err) {
                  notification.sendNotification('Ocorreu um erro ao buscar, tente novamente!', 'is-danger', 5000)
              } 
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>child</p>
  <pre><code>&lt;template&gt;
      &lt;ValidationProvider
          :vid=&quot;vid&quot;
          :rules=&quot;rules&quot;
          v-slot=&quot;{ errors }&quot;&gt;
  
          &lt;b-field 
              v-bind=&quot;$attrs&quot; 
              :type=&quot;{ 'is-danger': errors[0] }&quot; 
              :message=&quot;errors&quot; @resize=&quot;switchShow&quot;&gt;
              
              &lt;b-select v-bind=&quot;$attrs&quot; v-model=&quot;innerValue&quot; expanded&gt;
                  &lt;option v-for=&quot;item in itens&quot; 
                      :key=&quot;getItemValue(item)&quot;
                      :value=&quot;getItemValue(item)&quot;&gt;
                      {{ getItemText(item) }}
                  &lt;/option&gt;
              &lt;/b-select&gt;
          &lt;/b-field&gt;
      &lt;/ValidationProvider&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ValidationProvider } from 'vee-validate'
  
  export default {
      components: {
          ValidationProvider,
      },
      
      props: {
          rules: {
              type: [Object, String],
              default: null
          },
          itens: {
              require: true,
              type: Array
          },
          itemValue: {
              required: true,
              type: String
          },
          itemText: {
              required: true,
              type: String
          },
          value: {
              type: null
          },
          vid: {
              default: null
          }
      },
  
      mounted() {
          this.$nextTick(() =&gt; {
              window.addEventListener('resize', this.onResize);
          })
      },
      
      beforeDestroy() { 
          window.removeEventListener('resize', this.onResize); 
      },
  
      methods: {
          switchShow: function(event) {
              if (this.windowWidth&lt;=1250){
                  this.showIMP = false
              }else{
                  this.showIMP = true
              }
              console.log(&quot;event&quot;)
          },
  
          onResize() {
              this.windowWidth = window.innerWidth
              console.log(&quot;testing&quot;)
          },
  
          getItemValue(option) {
              const property = this.itemValue
              let result = null
  
              if (option[property] != null) {
                  result = option[property]
              } 
              return result
          },
          getItemText(option) {
              const property = this.itemText
              let result = null
  
              if (option[property] != null) {
                  result = option[property]
              } 
              return result
          }
      },
  
      data() { 
          return {
              innerValue: null,
              windowWidth: window.innerWidth,
              showIMP: true
          }
      },
  
      watch: {
          innerValue(newVal) {
              this.$emit('input', newVal)
          },
  
          value(newVal) {
              this.innerValue = newVal
          }
      },
  
      created() {
          if (this.value) {
              this.innerValue = this.value
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>thank you for the patience</p>