I have a route that is built which properly appends #fans at the end of the link...
http://localhost:3000/.../community#fans
I also have id set for fans in the below code (third line)
1) Even though the link is properly filled when a button is clicked (the address in the address bar is the address as shown above), it does not actually go to the part of the page with id fans.
2) But if I go to http://localhost:3000/.../community first and then type #fans at the end of the link, that works. If i remove the id, #fans does not work so I think the code below is fine.
Given #2, I don't understand why #1 is an issue especially since the link that works is the same link that gets generated for the button. Is there a reason why it would work when manually entering the id tag but not when generated?
<panelWithTopTitleAndOptionalTopButton
class="panelWithCards our-fans"
id="fans"
:class="{ hasNoCards: !fans || !fans.length }"
:name="fansTitle"
v-if="!!fansTitle">
<transition-group name="list" tag="div">
<memberCard class="card fan"
v-for="fan in fans"
v-if="!!fan"
:card="fan"
#delete-member="onDeleteMemberPosition"
type="fans"
:key="fan.key" />
</transition-group>
<div
v-if="showLoadMoreButton"
class="load-more"
#click="loadMore"
>LOAD MORE</div>
</panelWithTopTitleAndOptionalTopButton>
Related
i have a strange problem with arrays in vue3
When loading the components, a start array is transferred, in the components the values are taken over with a watcher if the start array changes. that works wonderfully. the whole thing is a little game, the user moves a cone on a certain route.
I switch to another component by changing a page number. the component with the game should actually be completely from the dom, I don't see anything in the tree either.
<transition name="fadepage" mode="out-in" >
<div v-if="getPage()==3">
<VueGameIntro :content="content" :level="level" :kontrastswitch="kontrastSwitch" :typoswitch="typoSwitch" :levelcolor="levelColor" #mqttMessage="changeMqttMessage"></VueGameIntro>
</div>
</transition>
<transition name="fadepage" mode="out-in" >
<div v-if="getPage()==4">
<VueGame :content="content" :level="level" :playerlist="playerList" :startpointlist="startPointList" :levelendstate="levelEndState" :activeplayerlist="activePlayerList" :kegelmoved="kegelMoved" :kontrastswitch="kontrastSwitch" :id="id" #mqttMessage="changeMqttMessage" #changeCurrPoint="changeCurrPoint"></VueGame>
</div>
</transition>
<transition name="fadepage" mode="out-in">
<div v-if="getPage()==5">
<VueGameOutro :content="content" :level="level" :levelendstate="levelEndState" :kontrastswitch="kontrastSwitch" :typoswitch="typoSwitch" #mqttMessage="changeMqttMessage"></VueGameOutro>
</div>
ok, when the first level has been played it changes to another component VueGameOutro, then it goes back to the actual game components with a new level. Suddenly I have the feeling that this array exists twice.
in the console i see different values than in the output on the screen: {{ currPointList }} shows something different than this.currPointList. in the vue dev plugin, however, are the values as well as the screen output. but the component definitely has a different starting point than the one in the currPointList.
the value in the console seems to have been the latest from the previous level.
Is that possible? how can I be sure that a component is completely gone?
are there arrays that have different values for string or number?
##########################################################
edited
that's the console output:
currPointList unmounted 25,0,0,0,
currPointList mounted 8,0,0,0,
GAME_MOVE currPointList #move,1,3,1 25,0,0,0,
currPointList before move 25,0,0,0,
currPointList move point updated 3,0,0,0,
as you can see, the 25 is in front of the unmount, then the component is reloaded and gets the 8 once via a property form the parent comp
then a move command arrives via websocket, an mqtt component receives the message and sends it to the game via MITT emitter. there's no other place to change currPointList. the first value jumps back to 25.
the problem occurred because the emitter.on("eventname" ...) was not deleted when removing the components. I also changed the emitter.on to an arrow function.
I've been searching this for a while but can't seem to get it right. I have a basic Nuxt project with the following directory structure (ignore the fun.vue) :
The idea is to be able to navigate to a single post with paths like http://localhost:3000/posts/1
This works, if I manually go to .../posts/1 I get my page defined in _id.vue.
The problem is that, in my index page, I cannot get <NuxtLink> to go to single post pages. I have a basic v-for looping over my fetched posts array, like so:
<template>
<div>
<div v-for="post in posts" :key="post.id">
{{ post.title }}
<NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
</div>
</div>
</template>
I would expect, upon clicking on the 2nd post's link for example, to navigate to posts/2, but instead I get /%60posts/$%7Bpost.id%7D%60. Why isn't the template string converted normally? I've also tried using a computed value with no success, and the Nuxt Routing docs haven't been of much help.
Highly appreciate any help regarding this.
You forgot the semicolon:
:to="`/posts/${post.id}`"
or even better
:to="{ name: 'post-id' }" // post-id or basically the name you gave to your component
As shown here: https://router.vuejs.org/api/#router-link-props
You can use something like this
the ":" in front of it will make it dynamic and you can use template literals
in between those double quotes
<NuxtLink :to="`posts/${post.id}`">Link to post</NuxtLink>
I tried your code in my development environment. You also may forgot to add "/" in front of "posts":
<NuxtLink :to="`/posts/${post.id}`">Link to post</NuxtLink>
If you put your code without "/" in a Nuxt "layout", it adds "posts" iteratively to your "URL" and makes the destination wrong:
http://localhost:3000/posts/posts/2
This happens when you click on post 1 and after to post 2.
who knows what file controls the function for add and minus button in the shopping cart? I want to change the qty that is added or minus after any buttons is clicked.
this is the code for the ADD button
<a rel="nofollow" class="" id="" href="{$link->getPageLink('cart', true, NULL, "add=1&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_address_delivery={$product.id_address_delivery|intval}&token={$token_cart}")|escape:'html':'UTF-8'}" title="{l s='Add' mod='advancedcheckout'}"><span><i class="fa fa-plus"></i></span></a>
Changing add=1 is not making any changes. So At start I thought it was a JS or AJAX file, but the button continues working even after I deleted all classes and ID. So I think all this trick is made by the code in href=""
But where I can make the changes for the qty added? Who knows?
If I good understand. You should look at those file:
themes/defaylt-theme/js/product.js: line 424
themes/defaylt-theme/js/product.js: line 408
You have to check the
cart-summary.js
in your theme/js/ folder. This will contain the + and the - button events
function upQuantity
function downQuantity
I'm using Vue.js 2 and I'm trying to create a link that should send me to another page. This is what I have:
<div v-for="u in myList">
<router-link :to="'/type/' + u.name"><a>{{u.name}}</a></router-link>
</div>
The above piece of code works but now I would like to pass a parameter (u.weight for example ) along with this link.
I took a look at query parameters but I don't want the user to see this in the address bar type/productname/?queryparamshere.
Is there a way to hide query params, or should I consider another way in order to achieve this?
Only the content of the div is unique. So, in the following dynamically generated html, only "My Article-1245" is unique:
<div class="col-md-4 article">
<h2>
My Article-1245
Delete
Edit
</h2>
<p>O ephemeral text! Here today, gone tomorrow. Not terribly important, but necessary</p>
</div>
How do I select the edit/delete link of this specific div, using Selenium? assertText/verifyText requires an element locator, but I do not have any unique id/name (out of my control). There will be many such div blocks, with other content text, all dynamically generated.
Any help would be appreciated.
If text 'My Article' appears each time, you may use following:
//For Delete
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Delete']"));
//For Edit
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Edit']"));
Hope it meets your requirement :)
Matching by text is always a bad automated testing concept. If you want to keep clean and reliable test scripts, then :
Contact your web dev to add unique identifiers to the elements
Suck it up, and create selectors based on what's there.
You are able to create a CSS selector based on what you want.
What you should do is create the selector using parent-child relationships:
driver.findElement(By.cssSelector("div.article:nth-child(X) a[href^='delete']"));
As I am ignorant of your appp, this is also assuming that all of your article classes are under the same parent. You would substitute X with the number of the div you want to refer to. e.g.:
<div id="someparent">
<div class="...article" />
<div class="...article" />
...
</div>