How can a variable declared in composition be used for dynamic rendering?

user_5583517 0
Viewed 93

I want a vue js v3 project using composition api, I have declared a variable like this

setup() {
    const showInvoiceItemForm = true;

    return { showInvoiceItemForm };
  },

Now I want to display a form when a button is clicked and a function is called like this

<form @submit.prevent="submit">
    <InvoiceItem
    :form="form"
    v-if="this.showInvoiceItemForm"
    ></InvoiceItem>

    <div class="mt-20 flex flex-row justify-between space-x-8">
        <BreezeButton type="button" @click="addInvoiceItem"
            >Add Item</BreezeButton
        >
        <BreezeButton>Generate Invoice</BreezeButton>
    </div>
</form>

And the method is like this

addInvoiceItem() {
    this.showInvoiceItemForm = true;
    console.log(this.showInvoiceItemForm);
},

From the console, I can see that the value of showInvoiceItemForm is set to true but the form is never shown. It looks like the value never really changes, so what is the proper way to use the composition api variable.

vuejs3 vue.js javascript
3 Answers

If I understand you correctly, (it is necessary to show the form when the button is clicked), then I hope this solution will help you.

<template>
  <form @submit.prevent>
    <form v-if="showInvoiceItemForm">
      <input type="text" placeholder="Type text here">
    </form>

    <div>
      <button @click="addInvoiceItem">Add Item</button>
      <button>Generate Invoice</button>
    </div>
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup () {

    let showInvoiceItemForm = ref(false);

    function addInvoiceItem() {
      showInvoiceItemForm.value = !showInvoiceItemForm.value;
      console.log(showInvoiceItemForm.value);
    };
    
    return {showInvoiceItemForm, addInvoiceItem}
  }
}
</script>

Also, if you not sure in "value change", you can install vue.js devtools, it's very useful.

user_185801740

You can try to make your variable reactive with ref or reactive and move all to setup function:

const { ref } = Vue
const app = Vue.createApp({
  el: "#demo",
  setup() {
    const showInvoiceItemForm = ref(false);
    const addInvoiceItem = () => {
      showInvoiceItemForm.value = true;
      console.log(showInvoiceItemForm.value);
    }
    return { showInvoiceItemForm, addInvoiceItem };
  },
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <form @submit.prevent="submit">
    <input v-if="showInvoiceItemForm" />
    <div class="mt-20 flex flex-row justify-between space-x-8">
      <button type="button" @click="addInvoiceItem"
        >Add Item</button>
      <button>Generate Invoice</button>
    </div>
  </form>
</div>

user_119891890

Vue 3 Composition API

setup() itself does not have access to the component instance - this will have a value of undefined inside setup(). You can access Composition-API-exposed values from Options API, but not the other way around.

You do not have to use this. See if changing v-if="this.showInvoiceItemForm" to v-if="showInvoiceItemForm" works, same for when you set it.

Try this code snippet and see if it helps.

user_149360010
Related