Check out my fiddle: DEMO
creating a new Vue instance:
{
el: '#app',
data: {
modules: ['abc', 'def']
}
}
I am looking for a way to hide or show elements using v-if based on the values in an array called modules[].
Any assistance on how to achieve this would be greatly appreciated. Thanks!
If you're faced with this situation, there are a couple of ways you can handle it. Let me walk you through them here. One option is to include a basic check using v-if to determine if the item exists in the modules array. For example:
<div class="abc box" v-if="modules.indexOf('abc') >= 0">abc</div>
<div class="def box" v-if="modules.indexOf('def') >= 0">def</div>
...
This method may not be the most elegant solution in terms of maintenance or performance. Another approach would involve using the modules array as a reference for generating your collection of div elements, utilizing v-for. Here's an example:
<div class="box" v-for="module in modules" :class="module">{{ module }}</div>
Take note of the following key points:
v-for directive relies on the modules array to dictate the number of divs to be rendered.{{ module }}) and as one of the classes (:class="module").box is consistently applied using the standard class attribute. The combination of this and the :class binding results in something like abc box as the list of classes.Below is a functional demonstration showcasing the v-for approach.
new Vue({
el: '#app',
data: {
modules: ['abc', 'def']
}
});.box {
height: 75px;
width: 75px;
background: #444;
padding: 10px;
margin: 5px;
color: #fff;
}<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0969585a0d2ced5ced6">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<div class="box" v-for="module in modules" :class="module">{{ module }}</div>
</div>While attempting to activate Fancybox upon the user shifting focus away from an input field containing a value greater than 25, everything seems to be in order with the focus out and value checking code. Nevertheless, when Fancybox is triggered, the follow ...
I've been trying to figure out a way to load heavy images after an ajax call using animated GIF as a pre-loader, but haven't found a satisfactory solution yet. Here's the code snippet I'm currently using: function loadProducts(url) { ...
I'm looking for a way to merge two arrays into a single object named "data" but haven't discovered an efficient method yet. Here are the arrays: var X = [ 4, 5, 6 ]; var Y = [ d, e, f ]; Merge them into an object: var data = { Y: [ d, e, f ], ...
When dealing with files containing simple data like mutation.js for vuex, the structure often looks similar to this example: export default { ... someFunction() {} ... } Currently, I am facing an issue where I am unable to access this. in order to uti ...
Hey there, I'm having an issue where clicking on one article link opens both! <span class='pres'><img src='http://files.appcheck.se/icons/minecraft.png' /></span><span class='info'><a href=&apo ...
I'm using JavaScript to determine whether an input value is in JSON format, but I've encountered a problem with a specific value. Below is my code explanation. isJSON = async(str) => { try { return (JSON.parse(str) && !!str); ...
Within my ASP.Net Core application, I am faced with the need to utilize validation on both the server side and client side in a bootstrap modal form. While I have successfully implemented server side validation, I have encountered difficulties when it come ...
I recently started using NextJS and I have a question about its router. I want to link to a page, but I would like the URL to be different. <Link href="/About/About" as="/about-page"> <a> Who We Are <im ...
I'm attempting to pass a formarray to a child component in order to display the values within the formarray there. Here is my current code, but I am struggling to figure out how to show the formarray values in the child component. app.component.html ...
Could someone investigate this issue for me? When you click on the showcase and then on the logo, a modal window should open with the logo. It works perfectly in FF 3.0, but in FF 3.5, the tab switches from showcase to home after clicking the logo. Even ...
Whenever I build my site for the first time, the CSS breaks initially, but strangely fixes itself when I press command + s on the code. It seems like hot reloading does the trick here. During development, I can temporarily workaround this issue by making ...
Hey guys, I'm having trouble resolving an issue with a JavaScript callback return. Here's the function in question: //Function to get user's contact list function get_contact_list(data) { //Retrieve user ID based on ...
I've been tackling a bug in my JavaScript/jQuery video player that has left me stumped. One of the key features of this player is an enter/exit full-screen button located at the bottom of the HTML snippet: (function($) { /* Helper functions */ ...
I've noticed smooth slow scrolling on various websites and have been searching for React or Vue plugins to achieve this effect. However, I am interested in learning how to implement it using vanilla JavaScript. Feel free to suggest plugins, libraries, ...
Trying to accomplish a somewhat complex task, I have dedicated hours to searching for the appropriate documentation with no success. The goal is for Visual Studio to generate some JavaScript code and place it in a specific folder, starting from: Performi ...
I have an object and I would like to convert it into an array const object1 = { a: { hide:true}, b:{} }; I am currently using Object.entries to perform the conversion, however, I am struggling with understanding how it should be done. Object.entries ...
Desiring to scroll down along with my selected document, I experimented with the following code. window.scrollTo(x, y); const body = document.getElementsByClassName("body")[0]; body.scrollTo(x, y); However, there are instances where it returns "undefined ...
My goal is to create a dropdown box that overlays the content of a div when an icon within it is clicked. However, currently, the dropdown box is pushing down the content of the div instead of overlaying it. I have tried adjusting my CSS by setting some el ...
I am working with a specific object structure in my code: lines: [{ order: '1', text: ' blue' },{ order: '2', text: 'green' },{ order: '3', text: 'yellow' }] Currently, thi ...
When traversing an array-like object, which method is more efficient for performance: using Array.from( ).forEach() or a traditional for loop? An example of an array-like object would be: let elements = document.querySelector('#someid').children ...