Accessing object fields in real-time

Currently restructuring Vuex, and facing a common action:

 deleteFromList ({commit}, {list = '', type = '', listPlural = '', data = {}}) {
  db.rel.find(list, data).then(doc => {
    return db.rel.del(list, doc.rooms[0])
  })
}

When list is set to room, it returns doc.rooms, an object containing rooms.

In this scenario, the listPlural parameter would have the value of rooms.

How can I dynamically return doc.rooms[0] using the listPlural parameter instead?

Is there a way to achieve something like doc.listPlural[0]? Just looking for ideas.

javascriptvue.jsvuejs2vuexpouchdb

Answer №1

To access the document field, you can utilize bracket notation as shown below:

 removeItemFromList ({dispatch}, {list = '', type = '', listPlural = '', data = {}}) {
  db.rel.find(list, data).then(document => {
   if(listPlural){// Check if the listPlural is not empty
      return db.rel.del(list, document[listPlural][0])
   }
  })
}

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

JavaScript Date displaying the string in the format YYYY/MM/DD HH:MM

I'm struggling to figure out how to format a date and time string like this: "YYYY-MM-DD-HH-MM" Can anyone help me with this? Here is the code I currently have: var x = new Date(); var formattedTimeStamp = x.toString(); Current Output: Tue Oct 3 ...

javascriptnode.js

What is the best way to refresh only the table and not the entire page in a React Js application?

I have created a code that displays loading.. message before the entire content appears. However, I only want to load the table itself. I attempted to separate the "List of Employee" from the button, but unfortunately, it did not work as expect ...

javascriptreactjs

Determining the type of a form element by identifying the select using its name attribute

<FORM NAME="form1" METHOD="POST" ACTION="survey.php"> <p>q2: Who is your closest friend?</P> <select name='q2' id='q21'> <option value='0'>Select a Name</option> < ...

javascriptjqueryhtml

Creating a dynamic image gallery with varying image dimensions using JavaScript and Bootstrap

Struggling with aligning an image gallery featuring images of varying sizes? I don't want to set the size programmatically as it may not look good on different screens. The additional challenge is dealing with white spaces between images and not knowi ...

javascripthtmlcsstwitter-bootstrapimage-gallery

Save geometric shapes data in the SQLite database

How do I go about storing polygon data in an SQLite database? Important: I am utilizing the Cordova plugin. polygon: Point[]; interface Point { x: number; y: number; } https://i.sstatic.net/5EYf2.png ...

javascripttypescriptsqliteionic3cordova-plugins

Have you ever wondered why MEAN.js applications use the #! symbol at the start of their URLs

Embarking on my first MEAN application build using MEAN.JS, I was intrigued by the structure of how mean.js organizes the application, particularly why URLs begin with /#!/. For instance, for the login page, I envisioned: http://example.com/login instea ...

javascriptangularjsurlmean-stackmeanjs

Storing the outcome of a promise for Node.js MSSQL validation is crucial

let FetchDataFromDatabase=(query) =>{ { let sql=require('mssql'); let configuration={ server:'127.0.0.1', database:'TestDB', user:'user', password:'user', }; ...

javascriptnode.jspromisenode-mssql

Javascript - Verify the presence of two elements within an array

How can I ensure that both ages 10 and 18 exist in a JavaScript array of ages, rather than just one? var ages = [3, 10, 18, 20]; ages.filter(age => age === 10 || age === 18); // returns 10 and 18 ages.filter(age => age === 10 && age === 18); ...

javascriptarrays

The reactivity of Vuex store properties is lost when they are newly created

Currently, I am utilizing Vue.js and Quasar, along with a Vuex store. Although the properties that were initially present during the initialization of the store are reactive, none of the newly created properties on an object of the store seem to be reacti ...

vue.jsvuexreactivequasar

Whenever a POST request is received, Flask always replies with a status code of 400

During my work on a project using Vue.js with Flask, I encountered a bug related to POST requests. Flask consistently responds with a 400 error code for all requests. To replicate the issue, follow these steps: main.py import os from ...

pythonvue.jsflaskaxios

What is the best way to test multiple components when using VeeValidate?

I am facing an issue where only the first of 2 components tested with different test files is passing. The second one fails with a Vue warning: "Error in directive validate bind hook: TypeError: Cannot read property '$scopedSlots' of undefined." ...

vue.jsvue-test-utilsvee-validate

Strategies for addressing input range slider cross browser compatibility issues

I have encountered an issue with the slider track while using a customized range slider with CSS. For Mozilla, I utilized the selector for progress (-moz-range-progress) and for IE I used -ms-filler-lower and -ms-filler-upper. Although it works well for b ...

javascriptjqueryangularjscss

Is it possible to adjust the center of rotation in THREE.js TrackballControls so that it is not located at the center of the canvas

I'm currently using TrackballControls within THREE.js. The issue I am facing is that the center of rotation always remains in the center of the canvas. Is there a way to adjust this and move the center of rotation upwards? Here are my failed attempts: ...

javascriptthree.js

Develop a straightforward static webpage and set it up by installing and launching it using NPM

I am attempting to craft a straightforward HTML page that incorporates CSS/JS and utilizes npm. The objective is to construct a basic page that can be accessed by simply using "npm install" and "npm start". As an example, I will design a page with HTML, ...

htmlnode.jsnpmvue.js

Create a new tab with a specified URL when a link is clicked

When the 'Terms and Conditions' link is clicked, I want to open a new tab in the same browser with the URL: http://localH:30321/OrchardLocal/TermsAndConditions Here is what I have tried so far: <p>Accept the <a href="~/" target="_blank ...

c#javascriptjqueryhtmlasp.net-mvc

Clone the children of an li element using jQuery, modify the text within a child tag, and then add it to

I have some awesome CSS that I want to recycle within a <ul>. My plan is to duplicate an existing <li> (to leverage the CSS), modify a <p> element, and then add it at the end of the <ul>. I believe I can achieve this by locating... ...

javascriptjqueryhtmlcloneinnerhtml

Is there a way to incorporate CSS into an element utilizing jQuery when only a class is available for identification, and when the time in the innerHTML is within a 5-minute range from the current time?

I have some HTML code that I need help with: <td class="mw-enhanced-rc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:10&nbsp;</td> My goal is to use JavaScript to make the time bold. $('td[class^="mw-enhanced-rc"]').eac ...

javascriptjqueryhtmlmediawiki

Show/Hide a row in a table with a text input based on the selected dropdown choice using Javascript

Can someone please assist me with this issue? When I choose Business/Corporate from the dropdown menu, the table row becomes visible as expected. However, when I switch back to Residential/Consumer, the row does not hide. My goal is to only display the row ...

javascript

What is the best way to assign my function to dynamically generated cards in vanilla JavaScript using event delegation?

I've been experimenting with a card flip feature on dynamically generated elements. The first function I created only applied to the template, so I tried delegating the event to an existing HTML element. However, it's not functioning as expected. ...

javascripthtmldomeventsevent-delegation

When enclosing my Javascript code in CDATA tags within my SVG files, it does not execute

Having an SVG file in this format: <svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 1435 1084"> &l ...

javascriptcssxmlsvgcdata