Dynamic v-if condition based on data binding

Is it possible to bind a v-if directive to data? I have an array of objects that represent navigation links or buttons, such as login and logout. Each object in this array has a 'v-if' property where the condition is defined as a string.

Sample from my Laravel backend:

$globals['socialLinks'] = 
        [
            [ 'title' => 'facebook', 'v-if' => '$app.auth', 'icon' => 'fab fa-facebook-f', 'url' => config('app.facebook'), 'image' => '/img/social/facebook-alt-white.svg' ],
        ];

In my template (I convert this into JSON and pass it to my Vue component template):

<div class="LAYOUTfooter9_row_container">
            <a class="LAYOUTfooter9_social_image_container" :href="social.url" v-for="(social,index) in $app.globals.socialLinks" v-if="[social.v-if]" :key="index+'S'">
                <img class="LAYOUTfooter9_social_image" :src="social.image">
            </a>
        </div>
javascriptlaravelvue.js

Answer №1

Running JavaScript code saved as a string can pose a risk. It's important to carefully consider if it is truly necessary...

<a class="LAYOUTfooter9_social_image_container" :href="social.url" v-for="(social,index) in $app.globals.socialLinks" v-if="evaluateCondition(social.v-if)" :key="index+'S'">

methods: {
  evaluateCondition(condition) {
    return eval(condition)
  }
}

The conditions must be in the form of an expression and will run within the context of the Vue instance, so instead of using $app.auth, you should use this.$app.auth

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In React, the state's value will revert back to its initialState whenever a new value is assigned

My App component has a simple functionality where it controls the state of a value to display a header. By using an onClick function, I'm updating the isHeaderVisible value to True in the Home component when a logo is clicked and another route is take ...

javascriptreactjstypescript

PHP: the images uploaded are not located within the designated folder

Having trouble uploading multiple images to a folder and saving them in the database? The images are not moving to the folder, even though the code works on localhost. Here is the code snippet: var abc = 0; // Declaring and defining global incremen ...

javascriptphphtmlcss

How to Retrieve Error Message from Response in Django REST Framework When Making a 400 Bad Request

I have a setup where I'm using Vue with DRF for my application. Whenever there is an issue with the form data and it is sent to the API, it responds with a 400 Bad request error as expected. The response in the Network tab provides a clear validation ...

vue.jsdjango-rest-frameworkaxios

What steps can be taken to troubleshoot issues with the jquery mask plugin?

I am using the jQuery Mask Plugin available at to apply masks to input fields on my website. Currently, I am trying to implement a mask that starts with +38 (0XX) XXX-XX-XX. However, I am facing an issue where instead of mandating a zero in some places, ...

javascriptjqueryjquery-plugins

React event handling

Currently, I am in the process of developing an accordion app using React. The data for this app is fetched from an API, and while I have the basic structure of the app ready, I am facing some difficulties with handling the click event on the accordion. H ...

javascriptreactjsaccordion

Vuex getter not reflecting changes in filter after modifying state array

I am currently working on a to-do application where I have implemented a button to toggle the checked/completed state of all todos. However, I have encountered an issue where although I am mutating an array of the state, the getters are not updating accord ...

arraysvue.jsstatevuexgetter

Filter out unnecessary attributes while utilizing an anonymous type in ClearScript

In my development project, I am creating a .NET wrapper for the popular java-script library called Linkify.js, utilizing Microsoft's ClearScript. The challenge I am facing involves implementing the attributes property within the options object parame ...

javascript.netvb.netclearscript

AngularJS does not allow data to be deleted in mongodb

Backend code: var User = require("./models/user"); var express = require('express'), app = express(), Account = require("./models/account"), mongoose = require('mongoose'), passport = require("passport"), basicAuth = require('basi ...

javascriptangularjsmongodb

Click the button to send the form without including any hidden HTML element array value

My main goal is to create a dynamic dropdown menu for users when they click a button. Each click triggers a new dropdown to appear. To achieve this, I have been cloning a hidden div each time the button is clicked. Here's an example of how I am accom ...

javascriptjqueryhtmlarrays

Ways to properly exit a function

What is the best way to pass the apiKey from the createUser function in User.ts to Test.ts in my specific scenario? User.ts interface User { url: string, name: string, } class User{ async createUser( user: User ):Promise<void> { le ...

javascripttypescripttestingtypes

Error: Unable to call topFrame.window.changeSelectedBarStyle because it is not a valid function. What could be causing this

This function is called changeSelectedBarStyle: function changeSelectedBarStyle(tdId){ $("#menuTable td").each(function(index){ if(this.id == tdId){ $(this).removeClass("menuPanel"); $(this).addClass("menuPanelSelected" ...

javascriptjquery

Looking for ways to streamline your React and Vue projects by reducing the number of

Coming from a background in emacs and xterm, I am accustomed to working with just a few files and having complete control over my work. Now I am delving into the world of React and Vue, but I was taken aback when I saw the sheer number of files generated f ...

reactjsvue.jsfile

Storing data in an object or array using Node.js to improve caching efficiency

I'm attempting to store and retrieve information in a node CLI script using either an array or an object. My goal is to have a simple key-value setup where I can fetch usernames by using the ID as the key. The code snippet below shows my attempt, but ...

javascriptnode.js

Firebase hosting adjusts the transparency of an element to 1% whenever it detects the presence of CSS opacity

I'm currently working on a website using Vue.js and Firebase. Everything runs smoothly locally, including a button with a desired low opacity. However, when I deploy the site to Firebase Hosting, the button's opacity inexplicably changes to 1% an ...

cssvue.jssassfirebase-hosting

"Getters appear to be malfunctioning and it seems that the state value remains immutable within the Vuex

After diving into VueX for the first time, I encountered some challenges: Struggling to access state using getters in store.js. While this.$store.state.java works fine, switching to this.$store.getters.semuaJasa results in no display on the browser. Unabl ...

vue.jswebvuex

The knockout.js subscribe function isn't activating during the initial set

In my model class, I have defined observables and I am looking to subscribe to their sets. Below is the code snippet that showcases what I currently have: var dto = function (data) { var self = this; self.Value1 = ko.observable(data.Value1); s ...

javascriptknockout.jsknockout-3.0

Adjusting the size of images in real time

Currently, I am in the process of creating a Fluid grid style website and I am looking to decrease the size of all images by 75% when the screen is below 1280px, 50% at 800px, and so forth. Is there a way to achieve this using the IMG tag? My attempt so ...

javascriptphphtmlcss

Rendering Next.js app within HTML markup provided as a string

I am facing a challenge with integrating my Next.js app into an external HTML markup. The provided markup structure consists of the following files: header.txt <html> <head> <title>Some title</title> </head> < ...

javascriptreactjsnext.jsserver-side-renderinghtml-react-parser

There is no matching overload for this call in React Native

I am working on organizing the styles for elements in order to enhance readability. Here is the code I have written: let styles={ search:{ container:{ position:"absolute", top:0, }, } } After defining the s ...

javascripttypescriptreact-native

Apply a border to the navbar when it hovers over a selected element

export const NavBar = () => { return <div className="navbar">this is navbar</div>; }; const Content = () => { return ( <div className="main"> <div className="background"> some content </div> ...

javascripthtmlcssreactjs