I need help to convert jQuery code to Vue js
<div class="single-why" v-for="(single, index) in data" :key="index">
<div class="content">
<h5 class="mt-3">100% Certified </h5>
</div>
<div class="hover-content" style="display:none">
<h5>100% Certified Jewellery</h5>
</div>
</div>
Here I need: when hover on .single-why , need to show .hover-content
as in jQuery
$('.single-why').on('hover', function (){
$(this).children('.hover-content').show()
})
Please suggest me using vue.
Thanks
You use #mouseover and #mouseleave events. In a loop you have to account for element index, so instead of using a boolean to show the hovered element, you use its index.
<div
class="single-why"
v-for="(single, index) in data"
:key="index"
#mouseover="hoverIndex = index"
#mouseleave="hoverIndex = null"
>
<div class="content">
<h5 class="mt-3">100% Certified </h5>
</div>
<div class="hover-content" v-show="hoverIndex === index">
<h5>100% Certified Jewellery</h5>
</div>
</div>
data(){
return {
hoverIndex: null
}
}
Related
I have a conditionally-rendered notes and I want to delete specific note, depends on ID.
I have no problem with deleting without modal, but my problem is that I want to delete note only when modal is accepted.
There is modal component:
<DeleteModal
:modalVisible="modalVisible"
:restore="modalType"
#closeModal="modalVisible = false"
#deleteItem="deleteNote(note.id)"
#restoreItem="restore()"
/>
Delete method:
const deleteNote = (id) => {
Inertia.delete(route('notes.destroy', id));
getNotes();
};
and there is how I render notes:
<div class="my-4" v-for="note in notesForIssue" :key="note">
<div class="flex flex-row justify-between"></div>
<div class="bg-gray-100 w-full min-h-16 mt-2 rounded whitespace-normal">
<div class="px-8 py-4">
<p>{{ note.text }}</p>
<div class="flex flex-row items-center justify-between">
<div class="flex flex-row text-xs">
<span class="text-[#2563EB]">{{ note.updated_at }}</span>
<p class="ml-2">{{ __('history.by') }}</p>
<p class="font-bold ml-2 text-[#2563EB]">{{ note.updated_by }}</p>
</div>
<div #click="modalType=false; modalVisible=true;">
</div>
</div>
</div>
</div>
</div>
But I have no access to note.id here: #deleteItem="deleteNote(note.id)". Any ideas, how to solve this problem?
Try this approach.
When you click on the div, instead of set visibality of modal,
set selectedItem
set visibility
then you accept by modal, you have a `selectedItem' for delete
After delete, clear the selectedItem.
First the key attribute is not accpet object type variable. Second maybe you should check what is notesForIssue first ,then find out why you can't access note.id
I'm getting some data from an API that contains an image and some other information. Now there's a problem in Nuxt js or maybe I'm wrong. Whenever I supply the path to the image in the :src it just doesn't work.
Here's my code:
<div v-for="(project, index) in projects" :key="project.p_id" class="swiper-slide">
<div :id="`index_${index}`" class="slide_wrapper">
<div class="background">
<img :src="getImgUrl(project.p_img_path)" alt="project cover image" />
</div>
<div class="details">
<div>
<div class="left">
<h2 style="color: black !impor tant">{{ project.p_label }}</h2>
<small>{{ project.p_date }}</small>
</div>
<div class="right">
<nuxt-link class="btn btn-secondary" to="/" #click="readMore">
<i class="fas fa-ellipsis-h"></i>
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
script:
props: ['projects'],
methods: {
readMore() {},
getImgUrl(path) {
return '../../../' + path
},
},
Last thing, whenever I use required required('./assets/'+image.jpg') nuxt.js crushes in compilation always stops at 69%. I also tried required.context but it didn't work as well.
Any help will be appreciated. Thanks in advance.
In your template, change:
<img :src="getImgUrl(project.p_img_path)" alt="project cover image">
To:
<img :src="require(`../assets/${project.p_img_path}`)" alt="project cover image">
You shouldn’t need a method to return the path as a string, just use a template literal as above.
Ps. This assumes project.p_img_path = img/project_img/filename.jpg, so adjust as necessary.
The solution is that I had to put all the images inside the assets folder directly. Thank you all for your time.
i am a absolute beginner in vuejs,i have a feature of adding dynamic input fields on click of a button it will keep on adding rows and keeping in mind the counter should be incrementing also so that i can validate on backend, this is my code so far
<div id="settlement_container" class="container-fluid mt-4">
<div class="card rounded-0 shadow-lg">
<div class="card-body p-0">
<div class="card-header px-2">
<div class="row wow fadeIn">
<div class="col-5">
<h3>Add Store Status</h3>
</div>
</div>
</div>
<form class="custom-form-group" action="{{url('stores/addStoreStatusDB')}}" method="POST">
<div class="form-group col-6">
<label for="exampleInputEmail1">Tax</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="tax" placeholder="Tax" required>
</div>
<div class="display-inline">
<div class="form-group col-md-6">
<button #click="addstatus" class="btn btn-primary">Add Rows</button>
</div>
</div>
<div class="display-inline">
<div class="form-group col-md-6">
<button type="submit" class="btn btn-primary">Update Tax</button>
</div>
</div>
<dynamic-rows/>
</form>
</div>
</div>
</div>
{{-- Main layout --}}
#push('script')
<script src="{{ asset('js/app_vue.js') }}" ></script>
<script>
Vue.component('dynamic-rows',{
//accept data inside template
props:['counter'],
//accept data inside template
template:"<label for='exampleInputEmail1'>counter</label>"
});
const app = new Vue({
el: '#settlement_container',
data: {
counter:0
},
component:['dynamic-rows'],
methods:{
addstatus:function(e){
appendDiv=""
e.preventDefault();
alert("inside");
}
}
});
</script>
now i can do this in jquery in 5 minutes , but as i am beginner in vuejs i cant developer the sense of it of how to do it, i have a component and i want to repeat the component every time the button is clicked,
here is the fiddle! fiddle
OK, so a lot going on here and I think it may be easier to break down some of the points in isolation for you to play with and learn.
To add inputs, I think it makes more sense to have the values being in an array. Using Vue, you can iterate through that array to let each array element have its own <input/> while also simply adding another array element to add a new input:
<template>
<div>
<div v-for="(tax, index) in taxes" :key="index">
<input v-model="taxes[index]" />
</div>
<button type="number" #click="add">Add</button>
<p>Count: {{taxes.length}}</p>
</div>
</template>
<script>
export default {
data(): {
return {
taxes: [0]
}
},
methods: {
add() {
this.taxes.push(0);
}
}
});
</script>
Now with regards to the counter, I don't know what you mean validate on the backend. You could add a watcher on the taxes array and process changes there? Watchers are used sparingly, with computed properties being much preferred, but they may make sense if you need to be sending data to the backend instead of into the DOM.
The counter prop you registered in your code is not really going to work for the pattern I showed. Generally, props are for parent components to pass data to child components. The preferred pattern when sending data from child to parent is to use $emit. Read more here.
I have a div that when i want hover to it, it will show other div. However, my first div is dynamic, it has an ID. So how will i able to hover to ID based on its ID?
It should be #mouseenter="hoverService{{services.id}} = true" but it causes error. So i made the code below to just static.
Here's my code below:
<template>
<div
class="col-md-3"
v-for="(services, index) in servicesFiltered"
:key="index"
#mouseenter="hoverService = true"
#mouseleave="hoverService = false"
>
<div class="service_background" v-if="hoverService">
<div class="mb-1" v-for="(sub_services, index) in services.menu_items" :key="index">
<router-link
:to="{ path: `/${sub_services.data}`}"
>
<a
href="#"
class="btn btn-outline-primary w-100 services_button"
>{{sub_services.text }}</a>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hoverService: false
};
}
};
</script>
Try this code
https://codesandbox.io/s/y7p9qyyovz
You need to maintain hover for each item you can not manipulate using single variable for multiple items.
i'm a bit new to vue, and maybe i'm trying to do something that is not doable.
i have this skeleton:
<div class="row"> <!--FIRST ROW-->
<skills-list></skills-list>
</div>
<div class="row"> <!--SECOND ROW-->
<skills-list></skills-list>
</div>
<div class="row"> <!--LAST ROW-->
<skills-list></skills-list>
</div>
now i have three row, each of them contain a vue custom component, this is my app:
Vue.component('skills-list', {
template: `
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="text-center">
<i :class="skills[0].class"></i>
</div>
<div class="progress-container">
<div class="progress" :id="skills[0].id"></div>
</div>
</div>
`,
data: function(){
return {
skills : [
{'class':'icon-html5-alt skills_icon','id':'#progress-html'},
{'class':'icon-css3-alt skills_icon','id':'#progress-css'},
{'class':'icon-javascript-alt','id':'#progress-js'}
]
}
}
});
new Vue({
el: '#cv_app',
});
my custom component template has two dinamic value, the class and the id, that are listed in the skills array.
i want to fill those value for every template i insert in the html code, i mean: replace in some way :class="skills[0].class with :class="skills[i].class iterating over the skills array.
Hope i explain my self clear, is it possible?