Having an Object array, I noticed that when I try to remove an object from the array list, only items are deleted from the end.
<div class="hours" v-for="(time, index) in hour" :key="index">
So, I decided to place a click function on an icon:
<b-icon
v-if="time.delete"
icon="x"
width="20"
height="20"
class="delete-time"
@click="deleteTime(index)"
></b-icon>
However, when attempting the deletion process:
methods: {
moment,
deleteTime(index) {
this.hour.splice(index, 1);
},
After some exploration, I've come to realize that the key challenge lies in adding a unique identification in HOUR, just like you did previously. I have made necessary updates to my initial response.
hour: [
{
id: 1,
"item-1": 10,
},
{
id: 2,
"item-2": 11,
},
{
id: 3,
"item-3": 12,
},
],
Remember that the key is linked to the unique id obtained from the hour object.
:key="time.id"
In addition, the deleteItems function requires an index as a parameter.
@click="deleteTime(index)"
<div class="hours" v-for="(time, index) in hour" :key="time.id">
<button @click="deleteTime(index)">
Content {{time.id}}
</button>
</div>
This is how your method should be written:
deleteTime(index) {
this.hour.splice(index, 1);
},
Give this a shot
removeTime(index) {
this.hour.splice(index, 1);
},
Make sure to always include an ID for tracking purposes. By the way, using splice here would also achieve the desired result.
new Vue({
el: '#app',
data: {
hour: [
{ id: 1, name: "one" },
{ id: 2, name: "two" },
{ id: 3, name: "three" }
]
},
methods: {
deleteTime(id) {
this.hour = this.hour.filter(item => item.id != id);
}
},
});<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id ="app">
<div class="hours" v-for="(time, index) in hour" :key="index">
{{ time.name }}
<button @click="deleteTime(time.id)">del</button>
</div>
</div>I am utilizing anychart for my user interface. My data timelines are in epoch milliseconds. When trying to create a Gantt chart, I notice that the right side is being trimmed. Can someone please assist me with this issue? https://i.sstatic.net/H6LHk.png ...
I have implemented a popup box that automatically appears after 5 seconds when the site is loaded. However, if I click outside of the popup box, it closes. I want to disable the background when the popup box is displayed. If I remove the two lines of code ...
Exploring the possibility of using Angular JS with MVC 5.0, I am looking for a way to log the complete class Object into a database whenever an Insert/Edit/Delete operation is performed. Is there a library available in Angular JS that can help serialize ...
My goal is to use Vue.js for designing purposes. I want the dashboard to open when I click on the login button, but I am facing challenges because I am new to Vue.js. Below are my codes and the error message: I am getting the following error: TypeError: C ...
In my application, I am parsing multiple database data using cron and currently, I have it set up to create a const run for each data to find the dag_id and manually test the determineCron function one at a time. How can I create an array so that the "dete ...
Trying to launch a WebApp for sharing files has been quite a challenge. After some thorough research, I stumbled upon the Web Share API which seemed like the perfect solution based on standard practices. The documentation provided a clear outline of how it ...
My HTML markup is structured similarly to this: <div id="parentElement"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div ...
When visiting on a smartphone browser, you may notice that instead of one menu icon, three icons appear. Upon inspecting the elements, you will find that there are three div's that look like this: <div class="responsive-menu-icon">&l ...
I am currently working on a project that is primarily written in TypeScript and then transpiled into JavaScript. The backend is built with Node, while the frontend uses React Native. Recently, after updating to Babel6, we started encountering numerous erro ...
Currently, I am utilizing Vue3 along with the options API. Within my setup, there are various Vue components that rely on a shared prop defined as: exercise: { type: Object as PropType<Exercise>, required: true, }, To streamline this pro ...
In my scenario, there are 8 checkboxes where only one is checked by default. If you click on the unchecked checkboxes twice, the table linked to them will hide. Ideally, I want the unchecked checkboxes to be hidden by default and the checked one to be sh ...
I've been attempting to utilize transformControl in my program, but due to the lack of documentation on controls at threejs.org, I find it challenging to tap into its full potential. I'm seeking information on all the properties and methods provi ...
I keep getting this error on the console: "IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId." I suspect that sessionId is empty because when I log response.data, it returns an "empty strin ...
Currently working on an Ionic React app and encountering the following error: Error: TypeError - Invalid attempt to destructure non-iterable instance Once I run the program, the error occurs at this point: . Shown below is a snippet of my code: import ...
After implementing an SSL certificate through Cloudflare on my website, I encountered an issue where a specific function returned an error code 0 and failed to load the URL content. How can I resolve this issue? $(function () { EnderReact(); }); functi ...
I am facing an issue with my buttons in a control group that represent on/off functionality. Every time I click on one of the buttons to switch their themes, the theme reverts back once I move the mouse away from the button. How can I make sure that the ...
Struggling to pass the todos (initial state) and addNewTodo (methods) using React Context hook and typescript. Despite trying multiple solutions, errors persist. Partial generics do not cause issues in the context component, but I encounter the error Cann ...
I am in the process of developing a web game that will showcase 3 images on the screen, and the player must select the image that corresponds to the displayed word. I have successfully created a JavaScript array containing the images and words retrieved fr ...
Is there a way to use javascript to set the selected value of a dropdown? Here is the HTML code I am working with: <select id="strPlan" name="strPlan" class="formInput"> <option value="0">Select a Plan</option> </select> I am ...
Can anyone assist me with implementing a "show more" and "show less" feature for a specific div? I have put together a DEMO on codepen.io In the DEMO, there are 8 red-framed div elements. I am looking to display a "show more" link if the total number of ...