I just have an element that opens and closes on click
<div class="folderItemHeader" :class="{ bold: isFolder }" #click="toggleChild(item)" :title="item.name">
<span v-if="isFolder" style="color: Tomato;">
<!-- LINE 1 <i :class="['fas', item.show ? 'fa-folder-open' : 'fa-folder']" :key="item.show"></i> -->
<i class="fas fa-folder-open" v-if="item.show"></i>
<i class="fas fa-folder" v-if="!item.show"></i>
</span>
{{ item.name }} {{ item.show }}
</div>
The first time it renders properly
But when I click anything the first time nothing happens, (it should show the other icon)
When I click again, it adds a new element
When I uncomment LINE1, it shows all icons in the correct format (first one is open, other children are closed initially), but after that nothing updates.
Note that the true and false value for item.show does actually update
Just to add more information, issue is not with Vue.js, because using my custom class instead of font-awesome works fine
<span v-if="isFolder" style="color: Tomato;">
<i :class="[item.show ? 'showClass' : 'dontShowClass']">My Data</i>
</span>
I import all in my index.js.
// "#fortawesome/fontawesome-free": "^5.13.0"
import '#fortawesome/fontawesome-free/js/fontawesome';
import '#fortawesome/fontawesome-free/js/solid';
import '#fortawesome/fontawesome-free/js/regular';
import '#fortawesome/fontawesome-free/js/brands';
Do I need to update my webpack.js?
Related
I am using vue to make a menu which can show and hide the description when click the title.
The original menu is like this showing the title
The expanded menu is like this expanding the menu description
<li class="cursor-pointer p-2 flex" v-for="(menu, index) in menus" :key="index" >
<div class="w-full flex items-center justify-between px-2" #click="handleSelect(menu,index)">
<div class="text-sm w-full ">
<i class="el-icon-document" ></i> {{ menu.name }}
</div>
</div>
<!-- menu show and hide-->
<ul class="py-4 px-1 rounded-b border-gray-100" v-show="menu.showed">
{{ menu.description }}
</ul>
</li>
handleSelect(menu,index){
console.log('select',index,menu.showed);
this.menus[index].showed=!menu.showed
},
menus:[
{
name:'Introduction',
showed: false,
decription:''
},
{
name:'Feedback Is Important',
showed: false,
decription:''
},
{
name:'Client Briefing and Debriefing',
showed: false,
decription:''
},
]
my expected result is that the expanded status of the menu could show and hide when clicking the menu title. However, clicking the first menu could change the 'showed' variable but doesn't show the expansion, only clicking the second menu will show the first menu.
It seems like the v-show not working, any solution or idea to solve it or better way to deal with menu show-up.
Your data needs to be reactive. Put your menus array inside the data section when using options API , or inside a setup script when using composition API
I am using Vue.js for my web application. I created a custom html popup element and tried to add it to the UI (on top of the house icon which you can see in the example), but I cannot make it appear on coordinates which are clicked. I know that I can do it with adding to the view UI and setting position to "manual", but I couldn't find any examples of setting the specific coordinates. Thank you in advance for your help.
this.viewt.ui.add(document.getElementsByClassName("popup")[0], {position: "manual"});
example
Template code
<template>
<div class="popup" v-if="openPopUp" ref="popupwindow">
<article class="house-card" id="popup-test">
<div class="img-wrapper">
<img class="post-image"
src="https://www.comitatoaurora.com/wp-content/uploads/2019/11/contemporary-exterior.jpg"/>
<div class="middle">
€{{ Math.round(this.object.Price) }}
</div>
</div>
<div class="article-details" :key="this.object.Address" #mouseover="hover = true"
#mouseleave="hover = false">
<div class="post-category">
<div>
{{
this.object.Address.replace(this.object.Address.substring(this.object.Address.indexOf(','),
this.object.Address.indexOf(',') + 9), ', ')
}}<span
style="margin: 0.3vw"></span>
</div>
</div>
<div class="percentage-circle">
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Risk"
>{{ this.object.Risk }}
</v-progress-circular>
<div class="progress-text">
<p>Risk</p>
<p>Score</p>
</div>
</div>
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Gross_rental_yield*10"
>{{
Math.round((this.object.Gross_rental_yield +
Number.EPSILON) * 10) / 10
}}
</v-progress-circular>
<div class="progress-text">
<p>Gross</p>
<p>Yield</p>
</div>
</div>
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Net_yield*100/5"
>{{ Math.round((this.object.Net_yield + Number.EPSILON) * 10) / 10 }}
</v-progress-circular>
<div class="progress-text">
<p>Net</p>
<p>Yield</p>
</div>
</div>
</div>
<div class="percentage-circle metrics-level">
<div class="bottom-metric"><img height="12vh"
src="../../public/img/year.svg"
alt="year"/><b>{{
this.object.ConstructionYear
}} </b></div>
<div class="headerDivider"></div>
<div class="bottom-metric"><img height="12vh"
src="../../public/img/rent.svg"
alt="rent"/><b>{{ this.object.Estimated_Rent }}€/mo</b>
</div>
<div class="headerDivider"></div>
<div class="bottom-metric" style="margin-left: 0.15vw !important;"><img height="12vh"
src="../../public/img/square.svg"
alt="square"/>
<b>{{ this.object.Sqm }}m<sup>2</sup></b></div>
</div>
<transition name="fadeo">
<div v-if="hover" class="overlay">
<router-link :to="{name:'card', params: { id: this.id }}">
<div class="overlay-text"> View Asset</div>
</router-link>
</div>
</transition>
</div>
</article>
</div>
</template>
There are two ways for popup to open over a selected feature,
automatically, for example when a feature is selected,
manually, using popup open method.
If you opted for 1), you have to set the PopupTemplate for the layer or the graphic. You have a couple of ways to define custom content for the PopupTemplate, like using a funtion or a promise.
ArcGIS API - PopupTemplate content
If you opted for 2), then you need to,
disable the default behavior if the view (auto open to false),
listen for click events,
on every click event manually open the popup (if a feature was selected), with the map point of the click event as location
view.popup.autoOpenEnabled = false; // <- disable view popup auto open
view.on("click", function (event) { // <- listen to view click event
if (event.button === 0) { // <- check that was left button or touch
view.popup.open({ // <- open popup
location: event.mapPoint, // <- use map point of the click event
fetchFeatures: true // <- fetch the selected features (if any)
});
}
});
I am trying to get all images for a category using Vue
<div class="col-md-12 col-sm-2 p-2">
<a v-on:click="onCategoryManageImageClick($event)" data-target="#location-
category-images">
</span>
</a>
</div>
So the event onCategoryManageImageClick ($event) does not work, if I am adding a html block and then click on get image button.
this is index.js
methods:{
onImagesTabClick(){
this.$root.$emit('activated-tab:location-images');
},
onCategoriesTabClick(){
window.j1App.eventBus.$emit("j1-location-image-list:shown");
},
onCategoryManageImageClick: function(event) {console.log('working event..');
event.preventDefault();
window.j1App.eventBus.$emit("j1-location-category-image-
list:shown",event.currentTarget.id);
}
}
So basically it need to to work like we do in jQuery
$(document).on('click',function{
})
So it works either page load or if adding any new html element on DOM. same I want in Vue.
You cannot alter the Vue template outside of Vue. That won't work. Vue compiles the template once when starting up and adds the event listeners to the rendered elements. If you add elements afterwards, Vue will not know about them.
The correct way of doing this would be to add those new elements in Vue.
<div
class="col-md-12 col-sm-2 p-2"
v-for="item in items"
:key="item.id"
>
<a
v-on:click="onCategoryManageImageClick($event, item)"
data-target="#location-category-images"
>
</a>
</div>
See https://v2.vuejs.org/v2/guide/list.html for documentation. In this case you need the items array variable in data and add more array elements to it, if you need more links.
Try raplacing your a tag with p
<div class="col-md-12 col-sm-2 p-2">
<p v-on:click="onCategoryManageImageClick" data-target="#location-
category-images">
</p>
</div>
I've created a card using VueJS & tailwind. There are some buttons on the card like edit & delete. I want to add a router-link on this Card Component, so that when a user clicks on the card, it opens up, but then the edit and delete buttons don't work any more and clicking on them, redirects the page too.
How can I solve this problem?
Here is my code:
<router-link to="somewhere">
<card-component :data="products"></card-component>
</router-link>
Card Component:
<div :key="id" v-for="(row, id) in data">
<div>
<img alt="Product Image"
v-lazy="row.img_url"
class="vs-images-hover-zoom rounded-lg p-0 h-24 w-32 object-center object-cover"/>
</div>
<div>
<p class="product-name font-medium">{{ row.name }}</p>
</div>
<div class="whitespace-no-wrap">
<feather-icon icon="EditIcon" svgClasses="w-5 h-5 hover:text-primary stroke-current" #click="editPopup = true"/>
<feather-icon icon="TrashIcon" svgClasses="w-5 h-5 hover:text-danger stroke-current" class="ml-2" #click="deletePopup = true"/>
</div>
</div>
Seems like you're having trouble with event handling because button's clicks are being caught by router-link. You can do one of them:
Use #click.stop in your buttons inside the Card component (it will stop event propagation);
Don't use router-link wrapping the whole card and put it just on image and title elements, for example;
Don't use router-link at all and get the #click event in right peaces of card, using this.$router.push to handle it.
I have what I think is a basic question for Vue, but I'm trying to run a method on click while also running a v-for loop on a component.
I'm not sure why but I can't get anything to run on that click handler but I see nothing in the Vue documentation saying that this isn't possible. Right now I'd settle for getting my console log running.
<IconBox
v-for="step in steps"
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
Here is the template for IconBox.vue:
<template>
<div class="icon-box">
<div
class="icon-holder"
:style="{ backgroundImage: 'url(' + step.image + ')' }"
>
</div>
<div class="text">
<div class="inner">
<h5>{{ step.name }}</h5>
<p v-if="step.description">{{ step.description }}</p>
{{ isSelected }}
</div>
</div>
</div>
</template>
I could run the click in the component itself but I need the parent well aware of what's happening to handle a selected boolean.
To use native events in component tags you should add .native modifier
<IconBox #click.native="yourMethod"/>
Check this guide.
To check it I suggest you to create a method and add console.log() inside it.
I have been playing around with Vue lately, and here's how I solved a similar problem in my project
<IconBox
v-for="step in steps"
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
Changes to
<template v-for="step in steps">
<IconBox
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
</template>