What are the best strategies for eliminating element cloning and duplication in Vue?

As a novice programmer, I've developed a web app similar to Trello. It allows users to create boards and within those boards, lists can be created. Each list is displayed uniquely with different IDs. However, the list items are displayed with the same ID and end up being duplicated in each list. Can someone please assist me in detail in identifying the issue? Your help is greatly appreciated.

Vuex file router.js

import Vue from 'vue'
import Vuex from 'vuex'

// Remaining code for Vuex store setup...

The page where the lists are created: MyBoard.vue

<template>
  <div>
    <div class="wrapper">
      // Code for displaying lists and items within them
    </div>
  </div>
</template>

<script>
export default {
  // Component logic to retrieve and display data
};
</script>

CreateList.Vue

<template>
  <div>
    // Creation of new list functionality
  </div>
</template>

<script>
export default {
  // Logic for adding and creating lists
};
</script>

CreateItemList.vue

<template>
  <div>
    // Adding new item functionality
  </div>
</template>

<script>
export default {
  // Logic for adding and creating items within lists
};
</script>

attach photo

Answer №1

Implemented the basic idea of the structure provided and made some enhancements:

  • id added to all items for identification purposes
  • children included in relevant items to track their contents

const store = new Vuex.Store({
  state: {
    tables: [
      { id: 1, children: ['1.1', '1.2'] },
      { id: 2, children: ['2.1'] }
    ],
    lists: [
      { id: '1.1', children: ['1.1.1'] },
      { id: '1.2', children: ['1.2.1'] },
      { id: '2.1', children: ['2.1.1', '2.1.2'] },
    ],
    cards: [
      { id: '1.1.1' },
      { id: '1.2.1' },
      { id: '2.1.1' },
      { id: '2.1.2' },
    ]
  },
  mutations: {
    ADD_CARD(state, listId) {
      const list = state.lists.find(e => e.id === listId)
      const cards = state.cards
      const card = { id: Date.now() }
      cards.push( card )
      list.children.push( card.id )
    },
    // Other mutation functions...
  },

// Additional Vue components and methods...

new Vue({
  el: "#app",
  store,
  computed: {
    tables() {
      return this.$store.state.tables
    }
  },
  methods: {
    addTable() {
      this.$store.dispatch('addTable')
    },
    tryMovingList() {
      this.$store.dispatch('tryMovingList')
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <button @click="tryMovingList()">MOVE LIST</button><br />
  <button @click="addTable()">ADD TABLE +</button>
  <hr />
  <custom-table v-for="item in tables" :key="'table-' + item.id" :c-table="item" />
</div>

The setup allows for easy hierarchy changes by transferring IDs between different arrays. The method tryMovingList() demonstrates how a whole list can be moved from one table to another. It's a simple solution suited for smaller applications.

SUGGESTION

To persist state in localStorage upon mutations, utilize Vuex's built-in subscribe mechanism instead of implementing it manually. Refer to https://vuex.vuejs.org/api/#subscribe

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 process for incorporating a new URL into the routes.js file of a preexisting Node.js project that was developed with locomotive?

module.exports = function routes() { this.root('pages#main'); this.match('/status', 'pages#status'); this.resources('paper'); this.resources('tempform'); this.match('/paper/domain', 'pages#n ...

Tips for handling the final row of a CSV file in Node.js with fast-csv before the 'end' event is triggered

After using fast-csv npm, I noticed that in the code provided below, it processes the last row (3rd row) of CSV data only after triggering the "end" event. How can this issue be resolved? ORIGINAL OUTPUT : here processing request here processing re ...

Refresh information periodically within a Node.js application

Recently, I developed a web application using nodejs to fetch data from Amazon. My goal is to have the app update at regular intervals for different purposes: - Every 15 minutes for real-time inventory monitoring - Once daily for less frequently changing d ...

Unable to load more than one controller in a single partial view using AngularJS

I am having trouble loading a second controller to populate a select in my view. Despite my efforts, it just won't cooperate. This is the code snippet I'm using: app.js (function() { 'use strict'; angular .module('app.lazylo ...

Generating requests using ExpressJS

Is it possible to send a POST request using a GET action? Although everything seems to be working fine, the "TOKEN" does not appear after the post. I am puzzled as to why this is happening. const request = require('request'); exports.g ...

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...

Ways to obtain the <a> using the title attribute

Is there a way to remove 3 classes from a specific <a> element that is dynamically generated? The only constant is the title. How can I locate an element based on its title? I've searched online but haven't found exactly what I'm looki ...

Is it possible to trigger the execution of two functions simultaneously by using onClick in JavaScript?

I currently possess: one = () => { //perform a task } two = () => { //execute an action } <div> <button onClick={/*this.one, this.two (it doesn't function)*/}>Go</button> </div> Is there a way to invoke two f ...

Removing other objects with Mongoose after an update

I'm facing an issue with my update query in mongoose. I can't figure out why other objects are getting deleted when I only intend to update one specific object. The code is functioning correctly in terms of updating, but it's causing all the ...

Get rid of the box-shadow on the Vuetify element

I currently have a special-table component that includes a box shadow when the row is expanded https://i.stack.imgur.com/8zgjp.png I am aiming for the removal of the box-shadow effect. After inspecting the console-style tab, I identified https://i.stac ...

Creating a versatile tabbed interface with Vue.js for multiple uses

I am currently working on integrating a tabbed reusable component in vueJs, but I encountered an issue stating that a specific component is not defined. Below, you will find the code snippets for both components: //TabComponent <template> <di ...

Control the start and stop of an Express.js app in Node.js using PHP

I'm currently developing a web service using express.js in the node.js npm environment. In order to deliver this project to my client, I need to create a controller file that allows me to start and stop the server without having to use the command pr ...

Waiting in Python using Selenium until a class becomes visible

Currently, I am trying to extract information from a website that has multiple web pages. This is how my code appears: item_List = [] def scrape(pageNumber): driver.get(url + pageExtension + str(pageNumber)) items = driver.find_elements_by_class_ ...

Steps on how to set the values of a select option based on a JSON parsed array

After receiving an array from a JSON call, I am trying to populate a select element with the data. {1:Android, 2:IOS, 3:Business Management Systems, 4:Database, 5:Codes/Scripts, 6:Others} or 1: "Android" 2: "IOS" 3: "Business Management Systems" 4: "Da ...

Encountering issues while deploying a Vue.js application on an Ubuntu server using GitLab Runner

Currently, I am in the process of deploying an application from a GitLab repository to a server running Ubuntu 20.04. The GitLab runner is registered and operational, with all SSH keys added accordingly. Although I have created the .gitlab-ci.yml file, I e ...

Using jQuery to dynamically populate a list with the information from a JSON dataset

How can I utilize JSON data to ensure that jquery populates the correct ul in this code snippet, creating 5 ul and populating them with li elements? Expected output: The slides should be assigned to specific modules as indicated in the JSON data, instead ...

Deciphering the AngularJS Component Hierarchy and Managing Identifiers for Freshly Generated Objects (using HTTP)

In my project using Angular 1, I have developed a todo list application which consists of two components. The first is a smart (container) component responsible for server-side interactions, while the second is a dumb/pure/stateless presentation component ...

Is there a way to integrate TypeScript into the CDN version of Vue?

For specific areas of my project, I am utilizing the Vue CDN. I would like to incorporate Typescript support for these sections as well. However, our technical stack limitations prevent us from using Vue CLI. Is there a method to import Vue.js into a bas ...

Leveraging AngularJS html5mode in conjunction with express.js

Client-side: when("/page/:id", { templateUrl: "partials/note-tpl.html", controller : "AppPageController" }); $locationProvider.html5Mode( true ); Html: <a ng-href="/page/{{Page._id}}">{{Page.name}}</a> Server-side: app.use("/pag ...

Tips for creating multiple files using nodejs and express

I am currently working on developing a personalized code editor that consists of 3 textareas: html, css, and javascript. The objective is to save the data from each textarea into individual files. With the help of express and nodejs, I have successfully m ...