I'm using VueJS components to create a dynamic pricing table. One of the more 'static' elements is a 'most popular' label which is added to the Team plan. I want to be able to use v-if to display a and add an extra class on the plan marked as most popular. I've simplified the code for brevity.
You can see I have tried multiple ways of formatting the expression (currently differs between the v-bind and the v-if) but I'm not sure if this approach is even possible.
Here is the HTML.
<div id="app">
<ul class="plans">
<plan-component :
name="Basic"
most-popular=false
></plan-component>
<plan-component :
name="Recreational"
most-popular=false
></plan-component>
<plan-component :
name="Team"
most-popular=true
></plan-component>
<plan-component :
name="Club"
most-popular=false
></plan-component>
</ul>
<template id="plan-component">
<li v-bind:class="{ 'most-popular': mostPopular == true }">
<template v-if="most-popular === true">
<span class="popular-plan-label">Most popular</span>
</template>
<p>{{ name }}</p>
</li>
</template>
</div>
And here is the JS.
Vue.component('plan-component', {
template: '#plan-component',
props: ['name', 'mostPopular'],
});
new Vue({
el: '#app';
});
You need to validate the mostPopular property type, since it's Boolean it won't work when you place most-popular=true because it's considered as a string "true" not true instead put most-popular tag on popular plan only. Here is example:
Vue.component('plan-component', {
template: '#plan-component',
props: {
name: String,
mostPopular: {
type: Boolean,
default: false,
}
},
});
new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<div id="app">
<ul class="plans">
<plan-component name="Basic"></plan-component>
<plan-component name="Recreational"></plan-component>
<plan-component name="Team" most-popular></plan-component>
<plan-component name="Club"></plan-component>
</ul>
</div>
<template id="plan-component">
<li v-bind:class="{ 'most-popular': mostPopular }">
<p>{{ name }} <small v-if="mostPopular" class="popular-plan-label" style="color: red">Most popular</small></p>
</li>
</template>
Use <template v-if="ok"> for conditional rendering.
Related
I'm trying to allow duplicates in Vue bootstrap's form tags.
I've tried using :tag-validator (in the example) and #tag-state to externally modify the v-model value. However it seems like it is getting rid of the duplicate somewhere. Is this impossible?
Jsfiddle of the example: https://jsfiddle.net/yts54fpd/.
<div id="app">
<template>
<div>
<b-form-group label="Tagged input using select" label-for="tags-component-select">
<!-- Prop `add-on-change` is needed to enable adding tags vie the `change` event -->
<b-form-tags
:tag-validator="tagValidator"
id="tags-component-select"
v-model="value"
size="lg"
class="mb-2"
add-on-change
no-outer-focus
>
<template v-slot="{ tags, inputAttrs, inputHandlers, disabled, removeTag }">
<ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
<li v-for="tag in tags" :key="tag" class="list-inline-item">
<b-form-tag
#remove="removeTag(tag)"
:title="tag"
:disabled="disabled"
variant="info"
>{{ tag }}</b-form-tag>
</li>
</ul>
<b-form-select
v-bind="inputAttrs"
v-on="inputHandlers"
:disabled="disabled"
:options="options"
>
<template #first>
<!-- This is required to prevent bugs with Safari -->
<option disabled value="">Choose a tag...</option>
</template>
</b-form-select>
</template>
</b-form-tags>
</b-form-group>
</div>
</template>
</div>
window.onload = () => {
new Vue({
el: '#app',
data() {
return {
options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
value: []
}
},
methods: {
tagValidator(tag) {
this.value.push(tag)
return true
}
}
})
}
Currently, I'm working with Vue v2.x.x. I have an array:
sectionTitles = ['Technology', 'Data', 'Poverty and Research', ...]
and I have jobsData that looks like this:
[{'title': 'Software Engineer', mainTag: 'Data', ...}...]
I want to display <li> in an <ul> when the sectionTitle matches the job.mainTag.
I was reading in the Vue docs that you shouldn't combine v-if with v-for, so I created a computed method to be able to filter the jobs. Here is what I did so far:
window.onload = function () {
var app = new Vue({
delimiters: ['${', '}'],
el: '#app',
data: {
jobs: jobsData,
sectionTitles: ['Data','Poverty Research Unit', 'Technology']
},
computed: {
matchingTitles: function (sectionTitle) {
return this.jobs.filter(function (job, sectionTitle) {
job.mainTag === sectionTitle;
})
}
}
})
}
<div id="app">
<template v-for="title in sectionTitles">
<h4 class="h3">{{ title }}</h4>
<ul class="list-none p-0 color-mid-background" id="jobs-list">
<li class="py-1 px-2" v-for="job in matchingTitles(title)">
<a :href="`${job.url}`">
${job.title}
</a>
</li>
</ul>
</template>
</div>
So basically I want to only display <li> when the sectionTitle (for example Data) matches the job.mainTag. How can I go about achieving this in Vue?
Change your computed method to just a method. Then change your filter to return a value. Also for displaying in Vue you want to use {{....}} not ${...}
new Vue({
el: '#app',
data: {
jobs: [{'title': 'Software Engineer', mainTag: 'Data'}],
sectionTitles: ['Data','Poverty Research Unit', 'Technology']
},
methods: {
matchingTitles: function (sectionTitle) {
return this.jobs.filter ((job)=>{
return job.mainTag === sectionTitle;
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="title in sectionTitles">
<h4 class="h3">{{ title }}</h4>
<ul class="list-none p-0 color-mid-background" id="jobs-list">
<li class="py-1 px-2" v-for="job in matchingTitles(title)">
<a :href="job.url">
{{job.title}}
</a>
</li>
</ul>
</template>
</div>
#depperm's answer works well (+1), but I'll offer a more render-efficient alternative. Computed properties are cached, so you could avoid the work of matchingTitles() on re-render. In addition, it might be easier to comprehend the template alone without having to jump to the implementation of matchingTitles().
I recommend computing the entire list to be iterated, mapping sectionTitles to the appropriate iterator object:
computed: {
items() {
return this.sectionTitles.map(title => ({
title,
jobs: this.jobs.filter(job => job.mainTag === title)
}))
}
}
Then, you'd update the references in your template to use this new computed prop:
<template v-for="item in 👉items👈">
<h4>{{ item.title }}</h4>
<ul>
<li v-for="job in 👉item.jobs👈">
<a :href="job.url">
{{ job.title }}
</a>
</li>
</ul>
</template>
new Vue({
el: '#app',
data: {
jobs: [{'title': 'Software Engineer', mainTag: 'Data'}],
sectionTitles: ['Data','Poverty Research Unit', 'Technology']
},
computed: {
items() {
return this.sectionTitles.map(title => ({
title,
jobs: this.jobs.filter(job => job.mainTag === title)
}))
}
}
})
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<div id="app">
<template v-for="item in items">
<h4 class="h3">{{ item.title }}</h4>
<ul class="list-none p-0 color-mid-background" id="jobs-list">
<li class="py-1 px-2" v-for="job in item.jobs">
<a :href="job.url">
{{ job.title }}
</a>
</li>
</ul>
</template>
</div>
Here's my code:
<pre
class="pre-text-formatted feed mt-2"
v-html="post.description.length >= 200 ? post.description.substring(0,200) + `... <a #click='readMore' class='text-muted pull-right' href>...read more</a>` : post.description">
</pre>
And here's the output:
The readMore method does not trigger its function.
Hello I personally don't like using v-html except in some rare cases. For this question I will suggest you render your templates conditionally. here's a sample that might help.
var app = new Vue({
el: '#app',
data: {
post: {
description: 'Hello you\'re awesome today.',
},
},
methods: {
readMore() {
alert('You click read more');
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<pre
class="pre-text-formatted feed mt-2">
<template v-if="post.description.length >= 200">
{{ post.description.substring(0,200)}} <a #click='readMore' class='text-muted pull-right' href>...read more</a>
</template><template v-else>{{post.description}}</template>
</pre>
</div>
you should try with conditional rendering, as below:
<pre
class="pre-text-formatted feed mt-2">
<template v-if="post.description.length >= 200">
{{ post.description.substring(0,200) }}...
<a #click='readMore' class='text-muted pull-right' href>...read more</a>
</template>
<template v-else>
{{ post.description }}
</template>
</pre>
I am rendering a list of store titles in VueJS, some of them have a url property, some of them don't. If the title has a url, I want to add a a href property:
<div v-for="(store, index) in stores">
<span v-if="store.link"><a :href="store.link" target="_blank">{{ store.title }}</a></span>
<span v-else="store.link">{{ store.title }}</span>
</div>
This works, but the code looks duplicated. Is there anyway to simplify the code further?
you can use component tag:
var app = new Vue({
el: '#app',
data () {
return {
stores: [
{title:'product1',link:'/products/222'},
{title:'product2'},
{title:'product3',link:'/products/333'},
{title:'product4'}
]
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div v-for="(store, index) in stores">
<component :is="store.link?'a':'span'" :href="store.link || ''" target="_blank">{{store.title}}
</component>
</div>
</div>
I'd remove the first span element, as it's not necessary. Also, the v-else does not need the conditional statement (it's not v-else-if):
new Vue({
el: '#app',
data: {
stores: [
{ link: 'foo', title: 'foo-text' },
{ title: 'bar-text' }
]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(store, index) in stores" :key="index">
<a v-if="store.link" :href="store.link" target="_blank">{{ store.title }}</a>
<span v-else>{{ store.title }}</span>
</div>
</div>
You can use dynamic arguments in vue3
https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments
<a v-bind:[attributeName]="url"> ... </a>
or binding an object of attributes
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
I'm attempting to access a computed property from the root Vue instance and access it inside a component. The <p class="currency"> element which is output outside of the component template outputs {{ currency }} correctly, but when trying to access {{ currency }} inside of the component nothing is output. I have tried setting currency as a prop but this doesn't appear to make any difference. I'm sure there must be a way to access the root Vue instance from within the component, something like {{ vm.currency }} but again I have tried this to no avail.
Here is the HTML.
<div id="app">
<ul class="plans">
<plan-component : name="Basic" ></plan-component>
<plan-component : name="Rec" ></plan-component>
<plan-component : name="Team" ></plan-component>
<plan-component : name="Club" ></plan-component>
</ul>
<template id="plan-component">
<li>
<h2 class="plan-name">{{ name }}</h2>
<h3 class="plan-cost">{{ currency }}</h3>
</li>
</template>
<p class="currency">{{ currency }}</p>
</div><!-- end #app -->
Here is the JS. The variable countryCode is defined elsewhere in my app, but like I said {{ currency }} is working outside of the component so this isn't an issue.
Vue.component('plan-component', {
template: '#plan-component',
props: {
name: String,
}
});
var vm = new Vue({
el: '#app',
computed: {
currency: function() {
if(countryCode === 'GB') {
return "£";
} else {
return "$";
}
}
}
});
For anyone with the same issue, you simply need to define $root before the property. So in my example instead of this...
<h3 class="plan-cost">{{ currency }}</h3>
...it needs to be this...
<h3 class="plan-cost">{{ $root.currency }}</h3>
The VueJS docs do talk about this under the Parent Chain section of Components.