What are the possibilities of utilizing a variable that is stated within composition to enable dynamic rendering?

Question

What are the possibilities of utilizing a variable that is stated within composition to enable dynamic rendering?

I'm working on a Vue.js v3 project using the composition API. I have defined a variable in my setup like this:

setup() {
    const showInvoiceItemForm = true;

    return { showInvoiceItemForm };
  },

Now, I want to show a form when a button is clicked and a function is called:

<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>

The method to handle showing the form is as follows:

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

Despite setting the value of showInvoiceItemForm to true, the form isn't displayed. It seems that the value doesn't change properly. Can someone provide guidance on how to correctly use the composition API variable?

javascript vue.js vuejs3

Answer 1

Answer №1

If my interpretation is correct, (display the form upon button click), then this solution should assist you.

<template>
  <form @submit.prevent>
    <form v-if="showInvoiceItemForm">
      <input type="text" placeholder="Enter 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>

Furthermore, if you are uncertain about the "value change", consider installing vue.js devtools as they can be quite beneficial.

Answer 2

If my interpretation is correct, (display the form upon button click), then this solution should assist you.

<template>
  <form @submit.prevent>
    <form v-if="showInvoiceItemForm">
      <input type="text" placeholder="Enter 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>

Furthermore, if you are uncertain about the "value change", consider installing vue.js devtools as they can be quite beneficial.

Answer 3

Answer №2

If you want to make your variable reactive, consider using ref or reactive and transferring everything to the 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>

Answer 4

If you want to make your variable reactive, consider using ref or reactive and transferring everything to the 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>

Answer 5

Answer №3

Discover Vue 3 Composition API

setup() function doesn't have direct access to the component instance - within setup(), this is undefined. You can access values exposed by the Composition API from the Options API, but not vice versa.

No need for using this. Try changing

v-if="this.showInvoiceItemForm"

to

v-if="showInvoiceItemForm"

and make the same adjustment when setting it.

Check out this code snippet to see if it provides any help.

Answer 6

Discover Vue 3 Composition API

setup() function doesn't have direct access to the component instance - within setup(), this is undefined. You can access values exposed by the Composition API from the Options API, but not vice versa.

No need for using this. Try changing

v-if="this.showInvoiceItemForm"

to

v-if="showInvoiceItemForm"

and make the same adjustment when setting it.

Check out this code snippet to see if it provides any help.

What are the possibilities of utilizing a variable that is stated within composition to enable dynamic rendering?

Answer №1

Answer №2

Answer №3

Similar questions

Discover the steps to execute a continuous loop of animations on a singular component using framer-motion

"Deploying code to Heroku using Node.js: A guide to adding git commits directly on

Learn the method to duplicate Outer HTML with the use of jQuery or Pure JavaScript

JS Nav Dots are not activating the Active Class

Position the division at the location of the cursor for particular usemap components

Creating a GIF file using Node.js leads to a corrupted image

Accessing data from localhost using Vue.js and Axios is restricted due to CORS policy and the error "Access to XMLHttpRequest" may be

Activate the "order evaluation" trigger on the checkout page in Woocommerce

Exploring Recursive Functions in Vue.js 3 Single File Components

Identifying patterns within a string using JavaScript and TypeScript

ExpressJS, defining routes, locating controllers, and documenting APIs

Getting a Node Express 404 error while attempting to display an image that was uploaded using multer

Hide modal once form has been successfully submitted

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

I'm having trouble displaying the content of my list items within the div

Is there a way to display this JSON data using mustache.js without needing to iterate through a

Different ways to streamline the validation process for multiple input fields in a form using Vue 3

The equivalent of ESM for resolving modules using the `createRequire` function with a specified

Securing Vue.js Routing with API and JWT Tokens: My Approach

javascript, contrasting functions and variables