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>
Related
I am using vuejs and I want to get the value of a div and display it inside of the model. Issue is i Cannot use the recommended refs because I in reality cant modify the html. Does anyone have a basic solution where I can leverage vuejs and push the content to the model where location is?
new Vue({
el: "#app",
data: {
location:''
},
methods: {
test:function(){
if (!this.$refs.myRef) {
console.log("This doesn't exist yet!");
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="FilePathPlaceholder" class="d2l-placeholder d2l-placeholder-live" aria-live="assertive">
<div class="d2l_1_234_979">
<div class="d2l_1_235_849 d2l_1_236_43 d2l-inline">
<span class="d2l-textblock"></span>
<span
class="d2l-textblock d2l_1_237_505 d2l_1_238_137"
id="d2l_1_233_684"
title="/content/Stuff/12183-CC-242/">
/content/Stuff/
<strong>12183-CC-242</strong>/
</span>
<input type="hidden" name="FilePath" id="FilePath" value="/content/Stuff/12183-CC-242/">
</div>
<div class="d2l_1_237_505 d2l-inline">
<span class="d2l-validator" id="d2l_1_239_562"></span>
</div>
</div>
</div>
</div>
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>
It's convenient to group data into nested object properties. By doing this, we don't have to collect properties from the data field into an entity for later use. As in the following example,
var demo = new Vue({
el: '#demo',
data: {
level1: {
level2: {
level3_1: 'Hello',
level3_2: 'world'
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo">
<div class="person">
<h3>{{ level1.level2.level3_1 }}</h3>
<p>{{ level1.level2.level3_2 }}</p>
</div>
</div>
However, it's really overkill having to type the "level1.level2" prefix in order to get to the level3_x field. It'll be very cumbersome if there're loads of level3 fields.
I wonder if there is any way that I can save the work for typing level1.level2 over and over again. Does the template have any syntax so that some section is under the scope of "level1.level2"? Does Vue provide any support so that in this case the prefix "level1.level2" is assumed?
There are a couple of options.
1. Use v-for
Everything inside the v-for block is scoped to the level that you're iterating over. Do it like this:
var demo = new Vue({
el: '#demo',
data: {
level1: {
level2: {
level3_1: 'Hello',
level3_2: 'world'
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo">
<div class="person">
<template v-for="(l2prop, l2propName) in level1">
<h3>{{ l2prop.level3_1 }}</h3>
<p>{{ l2prop.level3_2 }}</p>
</template>
</div>
</div>
2. Use a component
Components get a subset of their parent's data, so they're automatically scoped. Do it like this:
Vue.component( "person", {
props: ['data'],
template: '<div class="person"><h3>{{ data.level3_1 }}</h3><p>{{ data.level3_2 }}</p></div>'
});
var demo = new Vue({
el: '#demo',
data: {
level1: {
level2: {
level3_1: 'Hello',
level3_2: 'world'
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo">
<person v-bind:data="level1.level2"></person>
</div>
The example of #jason-smith is almost right. v-for is used for arrays or lists. To make it work is necessary to put your object in list.
Following his example the better approach would be
var demo = new Vue({
el: '#demo',
data: {
level1: {
level2: {
level3_1: 'Level 3_1',
level3_2: 'Level 3_2'
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="person">
<template v-for="level2Obj in [level1.level2]">
<h3>{{ level2Obj.level3_1 }}</h3>
<p>{{ level2Obj.level3_2 }}</p>
</template>
</div>
</div>
There are serval ways:
Use a method that gets the same level
methods:{
getLvl3: function(nr){
return this["level"+nr]["level"+nr]["level3_"+nr];
}
{{ getLvl3(1) }}
Iterate over with v-for v-for docu
example:
<div id="demo">
<div class="person">
<template v-for="(lvl2, key) in level1">
<template v-for="(lvl3, key) in lvl2">
<h3 v-if="key === 'level3_1'>{{ lvl3 }}</h3>
<p v-if="key === 'level3_2'">{{ lvl3 }}</p>
</template>
</template>
</div>
</div>
bind to variable that is defined outside of vue:
var nested = { level1: { level2: { level3_1: 'Hello', level3_2: 'world' }}
and inside of vue component or instance:
data:{
level2: nested.level1.level2,
}
<div id="demo">
<div class="person">
<h3>{{ level2.level3_1 }}</h3>
<p>{{ level2.level3_2 }}</p>
</div>
</div>
I would like to bind v-model to a specific array element like the following, is this possible?
<input v-model='item[1]' />
Thanks
Yes, that is the right way:
var vm = new Vue({
el: '#vue-instance',
data: {
items: ["Item1", "Item2"]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="vue-instance">
<input v-model='items[0]'/>
<div v-for="item in items">
{{item}}
</div>
</div>