View the first image without clicking on the edit button
Second picture shown when the edit button is clicked
What I want is, when the edit button of any div is clicked, that specific div should display a text field with a toggle effect. Additionally, I want to include the task name below this code snippet. Currently, all the divs are being updated with input boxes but it's not working as expected. Could you please check why all the divs are getting changed with input boxes?
[Code example]
Consider using index as a reference instead of boolean for isEditing:
new Vue({
el: "#app",
data(){
return{
content: "",
isEditingIndex: null
}
},
props:{
Items:{
type:Array,
default: () => [{Item:1},{Item:2}]
},
itemIndex:{
type: Number,
default: 1
}
},
methods:{
removeItem: function(idx){
this.Index = idx;
this.$emit('remove', this.Index);
},
itemContentChange(e){
this.content = e.target.value;
},
}
}).itemSection{
background-color: rgb(0, 0, 0);
margin-left: 25px;
width: 200px;
float: left;
margin-bottom: 5px;
border-radius: 5px;
border-width: 1px;
border-style: solid;
min-height: 40px;
color: white;
text-align: center;
display: flex;
}
.removeItem{
color: white;
}
.listItems{
align-items: center;
z-index: absolute;
display: flex;
}
.OptionMainSection{
width: 20%;
right: 0;
}
.ItemSection{
height:100%;
position:relative;
}
.ItemTitleList{
width: 80%;
}
.OptionMainSection{
display: flex;
flex-direction: column;
}
.OptionMainSection p{
margin: 0;
line-height: 25px;
cursor: pointer;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9MTIkjHinKOEG73Inks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgelOsdf==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<section v-if="Items.length > 0" class="mainItemSection">
<section v-for="(items, index) in Items" :key="index" class="itemSection" >
<!-- 👇 check for index -->
<div class="ItemTitleList" v-if="isEditing !== index">
<div class="ItemSection">
<p class="listItems">{{ items.Item }}</p>
</div>
</div>
<div class="ItemTitleList" v-else>
<div class="ItemSection">
<input :value="content" @change="itemContentChange" type="text" class="input-item"/>
</div>
</div>
<div class="OptionMainSection">
<div class="OptionMainSection">
<p class="removeItem fa fa-close" @click="removeItem(index)"></p>
<!-- 👇 set index -->
<p class="editItem fa fa-edit" @click="isEditing = index"></p>
</div>
</div>
</section>
</section>
</div>I'm grappling with a challenge and need some assistance. Despite my efforts, I can't pinpoint the exact source of the issue... The problem lies within an interactive graphic designed for Chrome users. This graphic includes variables that change ...
In the process of creating a terminal game using node.js, I am developing a random field consisting of different elements such as hats, holes, and pathways. The player's objective is to navigate through the maze and locate their hat within the field. ...
Is there a way to retrieve the tblid attribute from a button element when a click event occurs? I've looked at similar questions on sites like this one, but haven't found a solution that works for me - see the example below. I find it odd that ...
I'm exploring ways to utilize the spread operator for adding or removing object properties in a manner that preserves reactivity. Within a Vuex mutation, this code snippet is successful: Vue.set(state.sportTypes.sports, sportName, sportProperties) H ...
Can anyone help me figure out how to work through this JSON data using VUE? I'm having trouble accessing keys that v-for can't seem to reach: [ { "LavanderÃa": { "id": 1, "name": "LavanderÃa", "i ...
I have a project in Angular that needs to be developed without an internet connection, which means the CDN links will not work. I want to save the AngularJS library to a directory within my project. This is what I attempted: First, I visited the CDN link, ...
My initial plan was to log all the IDs of news in my database using console. However, when I executed the code, an error occurred as shown in this image. What is the best way to address and resolve this issue? https://i.stack.imgur.com/ci8G1.png ...
I am currently working with two draggable divs and I need to find a way to prevent them from being dragged to the right and down. Here is the CSS and JS code for each draggable div: #the-sheet { position: absolute; margin-left: auto; margin-right: a ...
In this code snippet, I am using the video ID 'TOwd30wXc-0' from YouTube: $.ajax({ url: "http://gdata.youtube.com/feeds/api/videos/"+realurl+"?v=2&alt=json-in-script", dataType: "jsonp", contentType: "application/json ...
When uploading an image from a React frontend to a Laravel backend, I encountered an issue where the uploaded image path was saved in the database but the image wouldn't display. React code ` useEffect(() => { axiosClient .g ...
I am currently working on a Node.js project using Express. I have been attempting to retrieve data using the NPM request package, utilizing a specific URL and passing an anonymous callback function to handle the resulting JSON file. The code below has bee ...
I am currently working on a signup page utilizing HTML and JavaScript. Everything was running smoothly until I added a function to navigate the user to the next page. The issue arises when the textboxes are left blank; upon clicking the button, the user is ...
Upon filtering the data, the response obtained inside the findChildrens function is as follows: My expectation now is that if the object length of this.newRegion is greater than 1, then merge the children of the second object into the parent object's ...
I have a VueJS component that makes an AJAX call to GitHub using the following code: (Child) Component Vue.http.get('user/repos').then((response) => { console.log(response); }, (response) => { console.log(response); }); The issue ...
I've been working on a hide/show function in jQuery that's giving me some trouble. The function includes an if/else statement that checks a data attribute in the HTML to determine whether to hide or show an element. While I can see that the funct ...
Here is the code snippet that I have created: router.get('/all-outlets', (_req, res) => { console.log('jererere'); // var sql = knex.select('*').from('retail_outletsss').limit(10); let stream = knex.raw(`sel ...
Currently, I am in the process of developing a simple blogging platform utilizing mongoose, node, express, Jade, and bootstrap. As I tackle the task of loading post content, I find myself contemplating whether to conduct database operations directly within ...
I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...
I am struggling to add a footer to my Vue.js project homepage. Being an inexperienced beginner in Vue, I am finding it difficult to make it work. Here is where I need to add the footer Below is my footer component: <template> <footer> </ ...
I have this straightforward HTML code: <td id="comment_td"> </td>. Notice the two spaces inside the td tags. I am checking the content of the td element like this: if (!$('#comment_td').html()) { $('#comment_td').html( ...