Searching for the way to access the values of a nested object's ref in Vue JS?

Within my Vue data object, I store a reference to a structure called Plot. It has properties for length, width, and acreage.

interface Plot {
  length: number,
  width: number,
  acreage: number
}
const model = {
   plot: ref<Plot[]>([]),
})

When fetching an array of plots, the challenge arises in setting individual plots while ensuring the presence of acreage property for validity. How can this be achieved?

My desired scenario is as follows:

// Current way of setting all plots at once
model.plots.value = plots
// Preferred method, but unsure how to implement
for( let plot of plots ){
  if(plot.length && plot.width && plot.acreage){
  // Need guidance on setting individual values within Ref<Plot>          
}

Answer №1

Perhaps I may have misinterpreted the question, but I will attempt to provide an answer based on my understanding.

To achieve your goal, you can utilize a combination of the filter and map functions in JavaScript.

model.plots.value = plots
  // 1. filter out all plots that do not meet certain criteria
  .filter((plot) => plot.length && plot.width && plot.acreage)

  // 2. map the current structure to the desired final structure.
  .map((plot) => ({
    // define the target structure here...
  }))

It might be helpful to provide additional code snippets for better context comprehension. The variation between model.plot and model.plots can cause confusion without further clarification.

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

Is there a way to configure multiple entry points in a package.json file?

I am looking to execute various commands using npm: "scripts": { "v1": "node v1.js", "v2": "node v2.js" } I would like to use npm start v1 or npm start v2 for this purpose, however, these commands do not seem to trigger the intended Node command. ...

The clearInterval function in Javascript may not effectively halt an ongoing animation

Whenever I press a button, the element rotates using setInterval and clearInterval to stop rotation at a specific value by clearing the interval time t. Everything works perfectly except when I continually click the same button before the current animation ...

Creating a live child component using React

My issue lies with the menu component, which is supposed to dynamically load elements in another container component. Unfortunately, the child elements are not being rendered. App.js import React, { Component } from 'react'; import './App. ...

Modifying SASS variable values based on the presence of specific text in the page URL

How can I utilize the same SASS file for two different websites with similar functionality but different color schemes? My goal is to dynamically change the color based on the URL of the page. However, I am facing challenges in extracting the page URL from ...

What is the best way to initiate a dialogue (updating component state) using Vue Router?

I am looking to enhance page state management using vue router. For instance: / should navigate to the home page. /login will keep the user on the home page while triggering a dialog with the login form. /register will also trigger the dialog, but this t ...

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

There are three radio buttons that correspond to school, restaurant, and store. Clicking on each button should display nearby locations of the selected type. Displaying Google Map and nearby places individually works fine without any issues. class Propert ...

How can I attach an event listener to an element that is added dynamically with jQuery?

I added a new div element dynamically using jQuery's on method. However, I'm having trouble getting a listener to work for the newly created element. HTML <input class="123" type="button" value="button" /> <input class="123" type="butt ...

The alignment of the first and second steps in Intro.js and Intro.js-react is off

There seems to be an issue here. Upon reloading, the initial step and pop-up appear in the upper left corner instead of the center, which is not what I anticipated based on the Intro.js official documentation. https://i.stack.imgur.com/ICiGt.png Further ...

jQuery import children into output

When inserting a div every nth-child and later calling the children of the parent, the jQuery inserted elements do not appear in this new list. How can I retrieve the inserted elements as well? Apologies if this is confusing. If it's easier to under ...

Setting up a Webpack configuration for packaging a Vue component as an npm module

Below is the primary JavaScript code for my component: import './sass/main.scss' import Vlider from './Vlider.vue' function install(Vue) { if (install.installed) return; install.installed = true; Vue.component('vlider ...

Is there a specific regex pattern available to identify CSS and JavaScript links within an HTML file?

Currently, I am using a straightforward gulp task to compress my CSS and JS files. The task appends a .min extension to the names of the compacted files. Now, I want to make changes in the HTML to direct to these new compressed files, like so: Replace thi ...

What is the best way to cut off multiple lines of text and display the remaining strings at the

Currently, I am working on a project that involves implementing a gallery feature. The challenge lies in displaying file names which can be quite lengthy, and we are restricted to showing only 2 lines of text. While this can be achieved using line clamp an ...

Troubleshooting the issue: Uncaught TypeError when trying to read property 'substr' of undefined while passing parameters in JavaScript

In a JavaScript code in my JS file, I have the following function: var obj, mtl; init(); animate(); var MYLIBRARY = MYLIBRARY || (function () { var _args = {}; // private return { init: function (Args) { _args = Args; ...

leaflet.js - Place a marker when clicked and update its position while dragging

Currently working on a small project that requires the ability to place a marker on an image-map powered by leaflet.js, and update its position if it's dragged. I was using the code below for this functionality but keep getting an error 'marker n ...

I am unable to deliver an email to the mailbox

Whenever I try to send an email, I encounter an issue. In order to complete the registration process, a confirmation mail needs to be sent. The error message that I receive is: Callback must be a function at maybeCallback const fs = require(& ...

Is jQuery AJAX returning improperly formatted JSON when using the jsonp type?

$('#rn_s').keyup(function() { var rn = $('#rn_s').val(); if(rn.length == 9) { $.ajax({ url: 'http://routingnumbers.info/api/data.json?rn=' + rn, type: 'GET', dataT ...

Tips on utilizing the identical template in ngIf

I need to display different templates based on certain conditions. For example: <template [ngIf]="item.url.indexOf('http') == -1"> <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" > ...

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

Checking for the presence of a specific function in a file using unit testing

I am curious if there is a possible way to utilize mocha and chai in order to test for the presence of a specific piece of code, such as a function like this: myfunction(arg1) { ...... } If the code has been implemented, then the test should return t ...

The Vue instance methods provide a way to access and manipulate formatted properties

I am looking to implement a method that will generate the appropriate email format to be used as the href value in an anchor tag. This method should return the formatted string in the following format: "mailto:[email protected]". var facultyInformat ...