Here I am trying to show image from data object in vue js. Here is my code
<a onclick="openModal()"><img src="{{product.productImageList[0]['name']}}"></a>
But it shows in dom like
<img src="{{product.productImageList[0]['name']}}">
Besides if I keep {{product.productImageList[0]['name']}} outside image tag then it shows value
Remove the interpolation
<img v-bind:src="product.productImageList[0]['name']">
For concatenation either go with
<img v-bind:src="'https ://admin.com/item_image/'+product.productImageList[0]['name']">
Or use computed property
computed: {
getUrl() {
return url=> {
const newUrl = `https ://admin.com/item_image/${product.productImageList[0].name}`;
return newUrl;
}
}
}
along with below template change
<img v-bind:src="getUrl(product.productImageList[0].name)">
{{}} is a template for displaying text. For attribute, instead you use v-bind with a valid javascript expression. Change to the following should work:
<img v-bind:src="product.productImageList[0]['name']">
Since the argument is a variable try binding the input like below
<img :src="product.productImageList[0]['name']">
Related
I hope it render like this:
// normal
<div></div>
// when necessary, add a `data-locked` property without value to it
<div data-locked></div>
I tried <div :data-locked='conditionBoolean'></div>, but not works as I expected (<div data-locked='true'></div> I don't want the value true/false).
Why I need this? That's because a third party CSS dependency write so:
[data-locked] { display: none }
You could use v-bind here
<div v-bind="dataAttrs"></div>
and define a computed property
dataAttrs() {
return this.conditionBoolean && { 'data-locked': '' }
}
Though you could achieve the similar behaviour using v-show without data-locked
<div v-show="!conditionBoolean"></div>
How can I put inside a HTML tag like this my object?
<a href="javascript:parent.call('{{ value.text }}','1','','2','3');">
The object is inside a loop from a Json parser.
Thank you
You can use this code:
<a :href="`javascript:parent.call('${ value.text }','1','','2','3');`">
Vue 2.0 does not allow interpolation inside attributes, you have to use the binding syntax:
<a v-bind:href="`javascript:parent.call(${ value.text },'1','','2','3');`">
or in short:
<a :href="`javascript:parent.call(${ value.text },'1','','2','3');`">
As a side note, it is preferable to keep the html clean and move this to a computed:
<a :href="link">
computed: {
link() {
return `javascript:parent.call(${ this.value.text },'1','','2','3');`
}
}
Just learning Vue2 this weekend.
I am trying to do something like this:
<a href='/arc/locations/{{location.id}}/edit'>edit here</a>
but getting an error saying:
- href="/arc/locations/{{location.id}}/edit": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
This is a bit confusing - I am trying to just write out a string that wont change and it seems to want to create a bound element. How woudl I just output it as a string in the url? If I can't do that, how would I just insert it into the url using Vue?
Overall, I like it but some expected gotchas.
As the warning states, you should use v-bind (of just the shorthand colon :):
<a :href="'/arc/locations/' + location.id + '/edit'">edit here</a>
Alternatively, you could make a computed property to generate the url value based off of the location.id and bind that:
computed: {
url() {
return '/arc/locations/' + this.location.id + '/edit';
}
}
<a :href="url">edit here</a>
I got this error
Interpolation inside attributes has been removed. Use v-bind or the
colon shorthand instead. For example, instead of <div id="{{ val }}">,
use <div :id="val">.
on this line
<a href="/Library/#Model.Username/{{myVueData.Id}}">
It works in Angular 1. How do you do it in Vue?
In your template:
<a :href="href">
And you put href in data:
new Vue({
// ...
data: {
href: 'your link'
}
})
Or use a computed property:
new Vue({
// ...
computed: {
href () {
return '/foo' + this.someValue + '/bar'
}
}
})
Just complementing ... solve the interpolation error (simple solution, I am Junior front-end developer):
Example post object in a loop:
instead of
<a href="{{post.buttonLinkExt}}">
try this way
<a v-bind:href="post.buttonLinkExt">
Use javascript code inside v-bind (or shortcut ":") :
:href="'/Library/#Model.Username' + myVueData.Id"
and
:id="'/Library/#Model.Username' + myVueData.Id"
Update Answer
Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:
<a v-bind:href="url"></a>
Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url. You may have noticed this achieves the same result as an attribute interpolation using href="{{url}}": that is correct, and in fact, attribute interpolations are translated into v-bind bindings internally.
Found in Google this topic when searching $attrib.
Question don't specify what value is used (maybe not defined before)
For ANY parent attribute or to FILTER it, use something like that:
<template>
<component
is="div"
v-bind="$attrs"
class="bg-light-gray"
>
EXAMPLE
</component>
</template>
This instruct to create specific, dynamic and context aware, wrapper:
v-bind="$attrs" instruct to take all sended params. Not needed to declare as param object in script.
Work even with valid html attribute like class
example above mix static class with parent and join it. Use ternary operator (x=1?x:y) to choose proper one.
bonus: by "is" you can dynamically set tag like header or secion instead of div
$attrs can be binded to any tag in component so this easily enable simple transmission for one tag dynamic attributes like you define class for <input /> but wrapper and actions are added in component
Source with description: https://youtu.be/7lpemgMhi0k?t=1307
you can either use the shorthand : or v-bind
<div>
<img v-bind:src="linkAddress">
</div>
new Vue({
el: '#app',
data: {
linkAddress: 'http://i3.kym-cdn.com/photos/images/newsfeed/001/217/729/f9a.jpg'
}
});
or for when you need more than just binding an attribute you can also do:
new Vue({
el: '#app',
data: {
finishedLink: ' Google '
}
});
Recently, I've encountered a problem that caused by the computed option of vuejs.
Firstly, I use v-for to loop for an array (soloColImgs) which is created by the computed option.
my HTML
<div class="show-box" v-for="item in soloColImgs" track-by="$index">
<img v-bind:src="item.imgUrl"/>
<a v-bind:href="item.itemUrl" target="_blank"></a>
</div>
my JS
//...
computed: {
soloColImgs :function(){
//....
},
methods: {
change:function(){
this.soloColImgs.pop();
}
}
Secondly, I change the array (soloColImgs) by using pop() or splice() etc...When I look into the console, the array can change accordingly, however, the DOM does't change at all. It would be greatful if anyone can help me out of this.
The point of a computed property is that its determined solely by the function that defines it. You cannot change it directly, you must change it by acting on the dependencies. The dependencies are the properties that are used to calculate the returned value.