Creating Conditional Vue Components

Question

Creating Conditional Vue Components

I am looking to dynamically create a list of actions, each of which is a component, based on a condition where the object variable store.plan is not empty. I attempted using v-if, which worked well for rendering but not for creating the component.

However, I encountered an error:

Uncaught (in promise) TypeError: action is undefined

You can find the complete code of this component here.

Could you please guide me on how to solve this issue? Thank you in advance.

<template>
    <div class="planlist" v-if="parse">
        <ul id="planOl">
        <Action
        v-for="action in store.plan"
            :action_id="action.act_id"
            :actor="action.actor"
            :color="action.color"
            :size="action.size"
            :lego_name="action.lego"
            :pick_pos="action.pick"
            :place_pos="action.place"
            :blocked="action.blocked"
            :status="action.status"
            :key="action.act_id"
        />
        </ul>
    </div>
</template>

<script>
import Action from '../components/Action.vue';
import { store } from '../js/store.js'

export default {
    name: 'Plan', 
    data() {
        return {           
            store,
        }
    },
    computed: {
        parse() { 
            if (store.plan.length > 0) { 
                return true;
            }
            return false;
        }
    },
    components: {Action}
}
</script>

javascript vue.js vue-component vuejs3

Answer 1

Answer №1

Have you considered using the concept of optional chaining in your JavaScript code:

parse() { 
  return store?.plan?.length > 0 ? true : false
}

Also, ensure you are not mixing v-if and v-for directives. It's recommended to wrap your component with a div containing v-if condition:

<ul id="planOl">
  <div v-if="parse">
    <Action
    v-for="action in store.plan"
        :action_id="action.act_id"
        :actor="action.actor"
        :color="action.color"
        :size="action.size"
        :lego_name="action.lego"
        :pick_pos="action.pick"
        :place_pos="action.place"
        :blocked="action.blocked"
        :status="action.status"
        :key="action.act_id"
    />
  </div>
</ul>

Answer 2

Have you considered using the concept of optional chaining in your JavaScript code:

parse() { 
  return store?.plan?.length > 0 ? true : false
}

Also, ensure you are not mixing v-if and v-for directives. It's recommended to wrap your component with a div containing v-if condition:

<ul id="planOl">
  <div v-if="parse">
    <Action
    v-for="action in store.plan"
        :action_id="action.act_id"
        :actor="action.actor"
        :color="action.color"
        :size="action.size"
        :lego_name="action.lego"
        :pick_pos="action.pick"
        :place_pos="action.place"
        :blocked="action.blocked"
        :status="action.status"
        :key="action.act_id"
    />
  </div>
</ul>

Answer 3

Answer №2

It is not advisable to combine the v-if and v-for directives on the same element as it can lead to syntax confusion.

Looking at your code, the computed property parse is being used to check the length of an array. Consider moving the v-if directive to a wrapping container element like an ul.

Example in the template :

<ul id="planOl" v-if="parse">
 <Action v-for="action in store.plan">...</Action>
</ul>

Corresponding script :

computed: {
    parse() { 
        return store.plan.length > 0 ? true : false;
    }
}

Answer 4

It is not advisable to combine the v-if and v-for directives on the same element as it can lead to syntax confusion.

Looking at your code, the computed property parse is being used to check the length of an array. Consider moving the v-if directive to a wrapping container element like an ul.

Example in the template :

<ul id="planOl" v-if="parse">
 <Action v-for="action in store.plan">...</Action>
</ul>

Corresponding script :

computed: {
    parse() { 
        return store.plan.length > 0 ? true : false;
    }
}

Answer 5

Answer №3

In order to simplify the process, consider moving the store.plan to a computed property for easier use within the template and parse property.
Instead of returning true and false based on conditions, simply return store.plan.length from the computed property to achieve the same result.
If you need to use v-if just outside the Action component, utilize the template tag to achieve this without adding unnecessary elements.

Implementing the following changes can assist in resolving the issues:

<template>
    <div class="planlist">
        <ul id="planOl">
            <template v-if="parse">
                <Action
                    v-for="action in plan"
                    :key="action.act_id"
                    :action_id="action.act_id"
                    :actor="action.actor"
                    :color="action.color"
                    :size="action.size"
                    :lego_name="action.lego"
                    :pick_pos="action.pick"
                    :place_pos="action.place"
                    :blocked="action.blocked"
                    :status="action.status"
                />
            </template>
        </ul>
    </div>
</template>

<script>
import Action from "../components/Action.vue";
import { store } from "../js/store.js";

export default {
    name: "Plan",

    components: {
        Action,
    },

    computed: {
        // A computed property to access the plan ()
        plan() {
            return store.plan;
        },

        parse() {
            /**
             * 1. The plan should not be null, empty, or undefined
             * 2. The plan should be an array to apply the length property
             * 3. If it's an array, it should contain data (have a length)
             */
            return this.plan && Array.isArray(this.plan) && this.plan.length;
        },
    },
};
</script>

Answer 6

In order to simplify the process, consider moving the store.plan to a computed property for easier use within the template and parse property.
Instead of returning true and false based on conditions, simply return store.plan.length from the computed property to achieve the same result.
If you need to use v-if just outside the Action component, utilize the template tag to achieve this without adding unnecessary elements.

Implementing the following changes can assist in resolving the issues:

<template>
    <div class="planlist">
        <ul id="planOl">
            <template v-if="parse">
                <Action
                    v-for="action in plan"
                    :key="action.act_id"
                    :action_id="action.act_id"
                    :actor="action.actor"
                    :color="action.color"
                    :size="action.size"
                    :lego_name="action.lego"
                    :pick_pos="action.pick"
                    :place_pos="action.place"
                    :blocked="action.blocked"
                    :status="action.status"
                />
            </template>
        </ul>
    </div>
</template>

<script>
import Action from "../components/Action.vue";
import { store } from "../js/store.js";

export default {
    name: "Plan",

    components: {
        Action,
    },

    computed: {
        // A computed property to access the plan ()
        plan() {
            return store.plan;
        },

        parse() {
            /**
             * 1. The plan should not be null, empty, or undefined
             * 2. The plan should be an array to apply the length property
             * 3. If it's an array, it should contain data (have a length)
             */
            return this.plan && Array.isArray(this.plan) && this.plan.length;
        },
    },
};
</script>

Creating Conditional Vue Components

Answer №1

Answer №2

Answer №3

Similar questions

Steps for creating a PDF file from an HTML page using JavaScript coding

"Learn how to use jQuery to transform text into italics for added

Implementing a Beveled Edge on a Shape using ThreeJS

Encountering a problem with NodeJS and ExpressJS Router.use()

Discovering whether an image contains a caption with the help of JavaScript

What steps are involved in extracting post data from the javascript DOM using php?

Loop through and display content on the webpage with a for loop

How can we display a different navbar based on whether the user is logged in or not?

Stack two divs together

Adapting the position of a table row in AngularJS based on the

Manage the angularJS user interface switch through an external event

Utilize data retrieved from an API to customize the appearance of buttons through the combination of React and Sass styling techniques

Struggling to access a remote URL through jQuery's getJSON function with jsonp, but encountering difficulties

Can the parent document interact with Shadow DOM elements?

Whenever I attempt to implement NavigationContainer in react native, an error always pops up

Add and condense sub-row

Error message: "When namedPlaceHolder parameter is disabled, bind parameters must be in the form of an

Activate function upon closure of window.open

Utilizing ng-repeat in a tabset to create an interactive and customizable tab interface

Generate some text on the following page utilizing the JavaScript function window.print()