<div class="temp_section" v-for="(item, i) in list" :key="i">
<div>{{ item }}</div>
<div class="curr_temp">{{ detail.data.temp_cur{{i}}}}</div> //<----Problem
<div class="set_temp">{{ detail.data.temp_set{{i}} }}</div>
<div class="minus">{{ detail.data.temp_sl{{i}}}}</div>
<div class="chart" #click="chart{{i}} = !chart{{i}}">차트</div>
<vs-dialog v-model="chart01">
<chart01></chart01>
</vs-dialog>
</div>
I want 'detail.data.temp_cur1, detail.data.temp_cur2, detail.data.temp_cur3....'
Is there any way to put i? Or should I use a different method altogether?
{{i}}............It feels like your brain is a potato.'😂😂
Try this one:
detail.data[`temp_cur${i}`]
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 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
}
}
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 have a v-for loop like this
<div v-for="deal in deals">
<div class="title">{{deal.title}}</div>
</div>
I'm trying to set a variable of a hover state, this is what I tried:
<div v-for="deal in deals" #mouseover="deal.hover = true" #mouseout="deal.hover = false">
<div class="title">{{deal.title}}</div>
<div class="description" v-if="deal.hover">{{deal.description}}</div>
</div>
Note that deal.hover is undefined by default (and it can't be pre-defined as false).
Is something like this possible in VueJS?
I'm not sure what you mean by "temporary" variable. Your code is attempting to add a hover property to each deal. You can certainly do that.
<div v-for="deal in deals"
#mouseover="$set(deal, 'hover', true)"
#mouseout="$set(deal, 'hover', false)"
<div class="title">{{deal.title}}</div>
<div class="description" v-if="deal.hover">{{deal.description}}</div>
</div>
Note the use of $set to add a reactive property to an object (see https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects).
How can I update the accordion-item title using a v-for loop inside F7+Vue ? I need each accordian-item title to be set to the Title of each object inside the myList array that is being looped over using the v-for.
Here is example below:
<f7-list-item v-for="value in myList" accordion-item title="{{value.Title}}">
<f7-accordion-content>
<f7-block>
<p>{{value.foo}}</p>
<p>{{value.boo}}</p>
</f7-block>
</f7-accordion-content>
</f7-list-item>
</f7-list>
Due to the time required for me to wrap my head around how I would use the current F7+Vue Accordion with a v-for to inject the title element... it seems that this is not possible. I could be wrong. I ended up resolving this by using the standard non f7+vue components...
example:
<div class="list accordion-list">
<ul>
<li class="accordion-item" v-for="value in myList">
<a href="#" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">{{value.Title}}</div>
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>{{value.foo}}</p>
<p>{{value.boo}}</p>
</div>
</div>
</li>
</ul>
</div>