Using computed properties with v-for - a comprehensive guide

In a current project, I have a component in which I am using v-for to iterate over a draggable JS component.

<div v-for="(val, index) in rows" :key="index"><draggable></draggable/></div>

The property rows in my computed is responsible for returning an array of arrays. This array is obtained from the parent component using v-model.

  props: {
    array: {
      type: Array,
      required: false,
      default: null
    }
  },
  computed: {
    rows () {
      if (isTrue) {
        const arr = this.array.map((v) => v.slice())
        const temp = doSomething(arr)
        return temp
      } else if (isFalse) {
        const arr = this.array.filter(elm => elm.length)
        return arr
      }
      return this.array
    }

Unfortunately, I've encountered an error message: 'Cannot read property 'Sortable1616400528253' of null'. When I replace rows with array, the error disappears but the output is incorrect, indicating there might be an issue with how rows is being handled. Any advice or suggestions on what could be going wrong?

Answer №1

When using v-model, it is essential to have a property that can handle both getting and setting operations. Component props should undergo immutable transformations for better functionality. In order to meet these requirements, creating a solution similar to the example below is recommended.

var bicomponent=Vue.component('biComponent', {
    template: `<div> 
  <draggable v-model="rows">
    <transition-group>
        <div v-for="(item, index) in rows" :key="item.id">
            {{item.text}}
        </div>
    </transition-group>
</draggable></div>`,
  components:{vuedraggable},
  props: {
    todoList: {
      type: Array,
      required: true,
      default: []
    }
  },
  data: function () {
        return {
            rows: this.todoList
        }
    }
});

Check out this jsfiddle example for reference.

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

Tips for resolving this unhandled error in React TypeScript

After creating a program in React TypeScript, I encountered an uncaught error. Despite running and debugging tests and conducting extensive research on Google, I have been unable to resolve this issue on my own. Therefore, I am reaching out for assistance ...

What is the most effective method for implementing this script in Vue.js?

I recently stumbled upon a tutorial that demonstrates similar functionality for Angular. The code snippet provided is as follows: openModal() { document.getElementById('imgModal').style.display = "block"; } ...

How can you use DOM manipulation to extract input data from an <input type="file"> element?

Is there a way to retrieve the data from an <input type="file"> element, specifically if it contains an image, without utilizing an html form? Here is the HTML code: <body> <input type= "file"> </body> ...

Issue encountered while activating react/jsx-sort-props [eslint-plugin-react Rules]

For my project, I am attempting to arrange props names alphabetically by utilizing the eslint-plugin-react plugin. After reviewing the example of the jsx-sort-props rules option at https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/js ...

Highlighting the Active Navigation Menu for the Current Page Using a Unified Header File

Is there a way to highlight the navigation menu for the current page I am visiting? header.php <div class="header-menu"> <div class="nav"> <ul> <a href="index.php"><li>Home</li> ...

Modifying specific attributes of an object within the $scope: A step-by-step guide

When working with Angular, if you have code in the view that looks like this: <span ng-model="foo.bar1"></span> <span ng-model="foo.bar2"></span> <span ng-model="foo.bar3"></span> Due to how Angular maps objects, you c ...

What measures can be taken to safeguard my web app from unauthorized devices attempting to connect?

I am looking for a way to restrict access to a webapp so that only authorized users can connect from approved computers or mobile devices. If a user enters the correct username and password, access will be granted only if they are using a device approved b ...

I am continuously encountering an error message saying [$injector:modulerr] while working with AngularJS

I've been reviewing my JavaScript code thoroughly, but I can't seem to pinpoint any major issues. The error message I'm encountering is as follows: Uncaught Error: [$injector:modulerr] Failed to instantiate module careApp due to: Error: [$i ...

Save data from localStorage to clipboard with a click of a button

Imagine you have a total of 25 different names stored in localStorage. How can you easily copy and paste this data from localStorage to clipboard by simply clicking buttons? Take a look at the button code that is designed to copy the localStorage data: & ...

What could be causing my Mocha reporter to duplicate test reports?

I've created a custom reporter called doc-output.js based on the doc reporter. /** * Module dependencies. */ var Base = require('./base') , utils = require('../utils'); /** * Expose `Doc`. */ exports = module.exports = ...

Troubleshooting issue with jQuery datepicker not triggering onselect event

Query Function: $(function() { $("#iDate").datepicker({ dateFormat: 'dd MM yy', beforeShowDay: unavailable onSelect: function (dateText, inst) { $('#frmDate').submit(); } }); }); HTML ...

Populate a list with corresponding values from a HashMap in Java

For an assignment, I am required to use an Array instead of an ArrayList, even though the latter would make the task easier. I have a HashMap filled with different animals based on their colors. The objective is to create a separate Array and populate it w ...

When trying to upload a file through input using WebDriver, the process gets stuck once the sendKeys

WebElement uploadInput = browser.findElementByXPath("[correct_identifier]"); uploadInput.sendKeys(elementPath); The script successfully initiates the file upload process, however, the custom JavaScript loading screen persists and fails to disappear as exp ...

Can anyone figure out why this code is not functioning properly? It seems to be targeting the body element and all of

Currently, I am utilizing jqtouch to create a mobile website. In addition to this, I am incorporating a gallery image slider into the website. However, I have encountered an issue where the images do not display when placed between <div id="project_name ...

Is there a way to incorporate the Indian rupee symbol into a Google chart?

I've been trying to incorporate the Indian Rupee symbol into a Google chart using the code below: var formatter = new google.visualization.NumberFormat({ prefix: '&#8377;' }); However, I'm encountering an issue where ...

Is Angular's promise implementation asynchronous in nature?

I can't seem to figure out the behavior of Angular's promises. Are promises actually asynchronous? I'm a bit confused about this concept. When using promises in my code to handle a large process (such as reading and writing hundreds of big ...

Checking date entries

After customizing the date format in the Django modelform widget and jQuery datepicker, I encountered an error indicating that the field is not valid. class Sale_Invoice_Main_Page(forms.ModelForm): class Meta: model = SaleInvoice field ...

jQuery wrapAll issue

I have a repeating group of three divs in my code that I need to wrap together. Here's an example from my HTML: <div class="one" /> <div class="two" /> <div class="three" /> <div class="one" /> <div class="two" /> <d ...

Synchronize one file between numerous applications

I manage a handful of small web applications for a small team at my workplace. These apps share a similar layout and file structure, with many files being identical across all of them. For instance, the index.js file in the src/ directory is consistent in ...

Having trouble with Angular JS's ngRoute feature not functioning properly

I've been struggling with my ngRoute implementation. I seem to be unable to load the 'ngRoute' module for some reason. Whenever I run this code, I just end up with a blank page. Below is my app.js file: var app = angular.module('tutor ...