title: Conditional Attribute Binding in Vue 3 Dynamically
body: <p>I'm trying out Vue 3 with a UI framework called <strong><a href="https://www.naiveui.com/en-US/os-theme" rel="nofollow noreferrer">naive-ui</a></strong> and I want to change the UI theme between light and dark dynamically when the value of a counter (in child component, getting the value by emitting event) is increased. For doing that, I must wrap the content with:</p>
  <pre><code>&lt;n-config-provider v-bind:theme=&quot;darkTheme&quot;&gt; &lt;/n-config-provider&gt;
  </code></pre>
  <p>(&quot;darkTheme&quot; is an object provided by framework).</p>
  <p>I tried the following, but it didn't work:</p>
  <pre><code>&lt;n-config-provider v-bind:theme=&quot;(count % 2 == 0) ? dark : light&quot;&gt;
  </code></pre>
  <p>Here is the rest of code:</p>
  <pre><code>Parent Component
  
  &lt;script setup lang=&quot;ts&quot;&gt;
  import { computed, watchEffect } from 'vue'
  import HelloWorld from './components/HelloWorld.vue'
  import { NButton, NConfigProvider, NSpace, darkTheme } from 'naive-ui'
  const light = null;
  const dark = darkTheme;
  var count = 1
  function onInc(evt) {
    count = evt.value
  }
  &lt;/script&gt;
  
  &lt;template &gt;
    &lt;n-config-provider v-bind:theme=&quot;(count % 2 == 0) ? dark : light&quot;&gt;
      &lt;n-space justify=&quot;center&quot;&gt;
        &lt;div&gt;light&lt;/div&gt;
        &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot; /&gt;
        &lt;HelloWorld @increment=&quot;onInc($event)&quot; msg=&quot;Hello Vue 3 + TypeScript + Vite&quot; /&gt;
      &lt;/n-space&gt;
      &lt;n-space justify=&quot;center&quot;&gt;
        &lt;n-button&gt;Default&lt;/n-button&gt;
        &lt;n-button type=&quot;primary&quot;&gt;Primary&lt;/n-button&gt;
        &lt;n-button type=&quot;info&quot;&gt;Info&lt;/n-button&gt;
        &lt;n-button type=&quot;success&quot;&gt;Success&lt;/n-button&gt;
        &lt;n-button type=&quot;warning&quot;&gt;Warning&lt;/n-button&gt;
        &lt;n-button type=&quot;error&quot;&gt;Error&lt;/n-button&gt;
      &lt;/n-space&gt;
    &lt;/n-config-provider&gt;
  &lt;/template&gt;
  
  
  Child Component
  
  &lt;script setup lang=&quot;ts&quot;&gt;
  import { ref, defineEmits } from 'vue'
  import { User } from '../models/userModel';
  
  const emit = defineEmits(['increment'])
  defineProps&lt;{ msg: string }&gt;()
  var user = new User();
  user.name = &quot;İsim&quot;
  const count = ref(0)
  
  
  
  function onClick() {
    count.value++
    emit('increment', count)
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;h1&gt;{{ msg }}&lt;/h1&gt;
    &lt;span&gt;{{ user.name }}&lt;/span&gt;
  
    &lt;button type=&quot;button&quot; @click=&quot;onClick()&quot;&gt;count is: {{ count }}&lt;/button&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Does anybody know how to bind the theme attribute dynamically?</p>