Access the attribute of one item within a different item's attribute

I'm looking to access attributes (fieldType, value) within a dynamic attribute (:class)

<div fieldType="favoriteSports" 
     @click="update_favorite_sports" 
     value="Soccer"
     :class="{selected: sportsForm[fieldType].indexOf(value) != -1 }">
     Soccer
</div>

An error is displayed as follows:

Property or method "fieldType" is not found on the instance but referenced during render. Remember to declare reactive data properties in the data option.

It seems like fieldType needs to be defined as a data property.

How can this be accomplished, or is it considered an anti-pattern?

javascriptvue.jsvuex

Answer №1

When using a v-for to populate values, the entire object is exposed to the template syntax.

This concept applies universally across various data structures.

<div
    v-for="sport in sports"
    :fieldType="sport.type"
    @click="update_favorite_sports(sport)" 
    :value="sport.name"
    :class="{selected: sportsForm[sport.type].indexOf(sport.name) != -1 }"
>
    Soccer
</div>

It's worth noting that the value and fieldType properties are unnecessary unless explicitly referenced elsewhere.

You can simplify your code by utilizing:

methods: {
    update_favorite_sports (sport) {
        // Your logic here, perhaps something like
        let index = this.sportsForm[sport.type].indexOf(sport.name)
        if(index >= 0) {
            this.sportsForm[sport.type].splice(index, 1)
            return
        }
        this.sportsForm[sport.type].push(sport.name)
    }
}

This approach essentially transforms the div into a radio select option.

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

What is the best way to handle redirection of requests to an external resource in an Express application?

Experimenting with Express redirects on a localhost website involves using the express routing feature, which captures and redirects http calls based on URI patterns. For example: var express = require('express') var app = express() app.get(&apo ...

javascriptnode.jsangularexpress

Searching for a way to access the child window URL within the parent window on a React.JS platform?

I am working on a ReactJS code and I need to open another URL in my child component. twitterPopup = () => { var currentChild = false; if (currentChild) child.close(); child = window.open( "http://10.10.1.1:9090/api/v1/twitter/login" ...

javascriptnode.jsreactjsecmascript-6

Issue with Bootstrap alert persisting even after being displayed once

Having trouble with alert messages in jQuery where I display the message, validate data, and then try to hide it again. No errors in the console, even when logging before and after the process. SOLUTION $('#password, #confirm_password').on(& ...

javascriptjqueryhtmlweb

How can I implement a token-based authentication system in my Node.js and Vue.js application?

After developing a spa with nodejs and vuejs, I am looking to incorporate an authentication system. Since this is new territory for me, I could use some guidance. The process would involve: An admin creating a user profile Sending an email to the ...

node.jsauthenticationvue.js

Warning: Angular.js encountered a max of 10 $digest() iterations while iterating through array slices. Operation aborted

JSbin: http://jsbin.com/oxugef/1/edit I am attempting to slice an array into smaller subarrays and iterate through them in order to create a table of divs that are evenly divided. Unfortunately, there seems to be an issue where I am unknowingly overwritin ...

javascriptangularjs

Error message from BitBucket pipeline indicates that the npm command was not found

Upon deploying code to my server via the Bit Bucket scp pipeline, I encountered an issue with another pipeline meant to install node modules and start the node server. The pipeline returned a failed status and displayed the following error: ./server-run.s ...

javascriptnode.jsnpmsshbitbucket-pipelines

Encountered an issue while trying to set up vuex in vue 2

I encountered an error while trying to install vuex in vue2; despite attempting various command lines. npm install vuex --save npm install vuex@next --save Even after updating the expected node version, I continued to encounter the following errors: ...

node.jsnpmvuejs2vuexvuex-modules

Having trouble with JavaScript not working when clicking an image and toggling a div?

Why isn't the onclick image and toggle div functionality working with JavaScript? I made the change from: <input type="button" id="Showdiv1" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" /> to: <img src="https://d ...

javascripthtmlcss

Customize Link Appearance Depending on Current Section

Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup: <div id="topNav"> <ul> <li><a href="#contact">Contac ...

javascriptjqueryhtmlcssviewport

Convert Roman Numerals with freecodecamp programming site

Why is it that the initial code snippet, which uses decimal numbers as keys and Roman numerals as values, fails the input-output test on freecodecamp.com for converting decimal numbers to Roman numerals? Conversely, the alternate code snippet, where the ke ...

javascriptconverters

Troubleshooting JavaScript: Dealing with JSON Import Issues Involving Arrays of Objects

I'm encountering an issue while trying to import a JSON file that contains an array of blog-posts. Although all the data from the JSON file is successfully imported, I am facing troubles with accessing the Array of objects (edges). This specific code ...

javascriptarraysjsonjestjsgatsby

Exploring the capabilities of JQuery's attributes

If I have the following div elements: <div class="hat" rel="cap"> <div class="hat" rel="pine"> <div class="hat" rel="mouse"> What is the JQuery syntax for executing a "where" condition? Here's an example: $("div.hat").remove WHER ...

javascriptjquery

Display your StencilJs component in a separate browser window

Looking for a solution to render a chat widget created with stenciljs in a new window using window.open. When the widget icon is clicked, a new window should open displaying the current state while navigating on the website, retaining the styles and functi ...

javascriptreactjstypescriptfrontendstenciljs

if the statement in v-if is complex

I have images with different alt names, and I'm looking to create a filter using these names. For example, if the current variant is red, I want to display images that have '#red' in their alt attribute, as well as images that don't hav ...

vue.jsif-statement

Challenge with Vue.js computed property when refreshing page in Chrome browser

I encountered an issue with my Toolbar component. After logging out, the user is reset to null and the router redirects them to the home page. One of the tabs in the Toolbar is linked to the user value (user === null). The home page is displayed correctly. ...

cachingvue.jsvuex

Tips on updating the value of a custom Vue directive's binding

When utilizing a v-for loop along with a Vue.directive for a bootstrap tooltip, I am encountering difficulties changing the binding value to reflect new data. Even after receiving new data from my method, the binding value remains static. I attempted crea ...

twitter-bootstrapvue.js

What is the best way to define a variable within a function?

Here's a function designed to verify if the username has admin privileges: module.exports = { checkAdmin: function(username){ var _this = this; var admin = null; sql.execute(sql.format('SELECT * FROM tbl_admins'), (err, result, fields ...

javascriptnode.jsexpressvariables

How can I ensure that Bootstrap Navbar elements are all aligned in a single line?

https://i.sstatic.net/pkxyI.pngI'm experiencing an issue with my code, and I suspect it might be related to Bootstrap. I've tried using align-items-center but it doesn't seem to work as expected. Changing the display property to inline or in ...

javascripthtmlcssreactjsnavbar

Extend the current main scene by overlaying a similar scene on the side

In my game scene, I have a group of robots that are currently active. What I'm trying to achieve is switching the camera perspective to one of the robots' first person view and displaying it in a small window on the side above the current scene. ...

javascriptthree.jsgame-development

Is it possible to conceal the source code within the dist js file using Vue JS?

I am looking to create a detailed logging page that showcases the logs without revealing the specific type of logging. I want to prevent users from accessing the minified vue JS script and easily reading the logged information. Is there a way to implemen ...

javascriptvue.jsauthenticationobs