How to conditionally bind to attributes in vue?
the v-bind directive:
Something like this given below:
<img :src=" status = true ? 'open.svg' : 'close.svg'">
In angular this is possible. I just wanted to know whether this is possible in vue.
Or is there a way to write javascript code like the one above in the template itself (ternary ops)?
You can do this:
<img :src="status ? 'open.svg' : 'close.svg'" >
Or set it as a computed property:
<img :src="imgSrc" >
computed:{
imgSrc(){
return (this.status) ? 'open.svg' : 'close.svg'
}
}
simply try this
<img :src="status ? 'open.svg' : 'close.svg'">
in your code status = true is assignment operator you should use comparison operator like this status == true
You can use status == true instead of status = true.
Just try this.
var vMain = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
status: true,
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<img :src='status == true ? "https://dummyimage.com/100x100/F00/fff" : "https://dummyimage.com/100x100/0F0/fff"'><br />
<button onclick='vMain.status = ! vMain.status;'>Switch Status</button>
</div>
computedproperty instead of sticking this expression into the template.