I am trying to add a href link with a variable in my vue template, for some reason it keeps breaking and I have no clue why, it's trying to reference it as a variable rather than a link. the issue is with the "/post/update" href. the "/view-user/ + post.user.id" works fine
<template>
<div id="content">
<div class="post">
<h3>{{post.title}}</h3>
<p>{{post.content}}</p>
<a :href="/view-user/ + post.user.id">
{{post.user.username}}
</a>
<p>{{ post.created_at.split(".")[0] }}</p>
<a :href="/post/update/ + post.id">Edit</a>
</div>
<hr>
<comment :id="id"/>
</div>
The static part of the href value should be wrapped by '' as string :
<a :href="'/view-user/' + post.user.id">
or string template :
<a :href="`/view-user/${post.user.id}`">
in your case it's evaluated as expression.
Related
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>
how to use id in components, the code as below:
The components code as below:Profilelist.js
<template>
<div class="col col-m-12 col-t-6 col-d-6 box-item f-software">
<div class="item animated">
<div class="desc">
<div class="image">
<a href="#popup-{{id}}" class="has-
popup"><img src="{{workpic}}" alt="" /></a>
</div>
<div class="category">{{category}}</div>
<div class="name">
<a href="#popup-{{id}}" class="has-
popup">{{project_name}}</a>
</div>
</div>
</div>
<div id="popup-{{id}}" class="popup-box mfp-fade mfp-hide">
<div class="content">
<div class="image">
<img src="{{workpic}}" alt="">
</div>
<div class="desc">
<div class="category">{{category}}</div>
<h4>{{project_name}}</h4>
<p>
{{project_content}}。
</p>
<a href="{{project_link}}"
class="btn">View Project</a>
</div>
</div>
</div>
</div>
</template>
The index file code as below:
<div class="row box-items">
<ProfileList
v-for="profile in loadedProfiles"
:key="profile.id"
v-bind:id="profile.id"
:workpic="profile.workpic"
:category="profile.category"
:project_name="profile.project_name"
:project_content="profile.project_content"
v-bind:project_link="profile.project_link"
/>
</div>
And it outcome an error code as below:
href="#popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
src="{{workpic}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
href="#popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
id="popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
src="{{workpic}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
href="{{project_link}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
You have to bind the data to your attributes and do the proper concatenation using template literals, replace your attributes following the examples
:href="`#popup-${id}`"
:src="workpic"
:id="`popup-${id}`"
:href="project_link":
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>
For some reason Vue doesn't render {{post.title}}, {{ post.content }} brackets for me. The content is empty (look at the rendered html below), but v-bind:href="post.url" works for some reason. I'm new to Vue.js and really stuck for day now.
Backstory:
this code is Vue instant search for my Jekyll blog.
HTML
<div v-if="articles" class="large-12 columns">
<article v-for="post in itemsSearched" class="article-summary">
<header>
<h2><a v-bind:href="post.url">{{post.title}}</a></h2>
</header>
<p>{{ post.content }}</p>
<div class="large-12 column">
<a class="read-more" v-bind:href="post.url">Read More...</a>
<div class="middle_line"></div>
</div>
</article>
</div>
Rendered HTML
<article class="article-summary">
<header>
<h2></h2>
</header>
<p></p>
<div class="large-12 column">
Read More...
<div class="middle_line"></div>
</div>
</article>
Jekyll uses double curly braces itself, so you need to define custom delimiters for your Vue.
new Vue({
delimiters:['<%', '%>'],
....
})
And then use
<% post.title %>
Instead.
You can define whatever delimiters you want, I just used those as an example.
Please use v-text or v-html instead. In vue 2.0,Vue-config-delimiters was deprecated, delimiters is only avaliable in the full build.[]:https://v2.vuejs.org/v2/guide/migration.html#Vue-config-delimiters-replaced
I'm trying to do something like this:
<div v-for="r in rentals">
<a bind-href="'/job/'r.id"> {{ r.job_title }} </a>
</div>
I can't figure out how to add the value of r.id to the end of the href attribute so that I can make an API call. Any suggestions?
You need to use v-bind: or its alias :. For example,
<a v-bind:href="'/job/'+ r.id">
or
<a :href="'/job/' + r.id">
Or you can do that with ES6 template literal:
<a :href="`/job/${r.id}`"
You can concatenate your static value and dynamic value as string values, while binding href. Using your example:
<div v-for="r in rentals">
<a :href="'/job/' + r.id"> {{ r.job_title }} </a>
</div>
If you want to display links coming from your state or store in Vue 2.0, you can do like this:
<a v-bind:href="''"> {{ url_link }} </a>
This can also help.
<a target="_blank" :href="r.reg_metadato">{{ r.reg_metadato }}</a>