I am trying to split the last end of the URL to get numeric value. It is throwing an error. I haven't used vue in a while but I know we can use methods/function to get desired results? Where am I doing it wrong?
<ul>
<li v-for="(character, index) in characters" :key="index">
<router-link :to="'/characters'+ character.url.split("/").pop()">
{{character.name}}
</router-link>
</li>
</ul>
Here is an example, hope this helps:
new Vue({
el: '#app',
data: {
character: {
url: 'https://jsonplaceholder.typicode.com/todos/101'
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-html="`/characters/${character.url.split('/').pop()}`"></div>
<div> {{ `/characters/${character.url.split('/').pop()}` }}</div>
</div>
I am using string literals (Template literals or Template strings) to keep the code clean by eliminating some double/single quotes and + used for concatenation.
Related
I have an Object array which is following
But, I need to show
email: Email muss eine .....
phone: Telefonnummer ist ...
How can I do this in javascript? Actually I need to use this in VueJs.
From the screenshot you are receiving this from props so we can do this in the template:
<template>
<div class="errors">
{{ failureReasons.email ? failureReasons.email[0] }}
</div>
</template>
If you would like to get all the errors into a single array (e.g. ['Email mus...', 'Telefon ...']) you can do:
<template>
<ul>
<li v-for="error in Object.keys(failureReasons).map(key => failureReasons[key][0])"> {{ error}} </li>
<ul>
</template>
I'm trying to get just a simple hello world for v-for. I've googled this for an hour and found various other posts, such as this one to no use.
My HTML:
<ul>
<li v-for="item in history">
{{ item }}
</li>
</ul>
My JS:
new Vue({
el: '#app',
data: {
history: [
'red','green','blue'
],
},
});
My Output:
{{ item }}
Someone please tell me what I'm doing wrong and why I can't get this bare-bones example working. I've tried using arrays and objects, looping using the key attribute, and several other things.
Docs: https://v2.vuejs.org/v2/guide/list.html
EDIT: apologise for the awful title; I had to change it 13 times before SO stopped yelling at me...
EDIT 2: I have the app defined containing the entire body of HTML: <div id="app">, thank you for the answers though : )
EDIT 3: Resolved, I must've had a div tag closed prematurely; commenting it out fixed the code. Thanks for the answers.
Probably you don't define the id app in the HTML section. Here is the working code.
new Vue({
el: '#app',
data: {
history: [
'red', 'green', 'blue'
],
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul id='app'>
<li v-for="item in history">
{{ item }}
</li>
</ul>
You need to have "#app" id in your code like this
<ul id="app">
<li v-for="item in history">
{{ item }}
</li>
</ul>
I am trying to do the following:
{{ limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre' }}
However Vue does not accept that i add another element <i> inside the {{ }}. How do I get around this? \<i does not work...
You can use v-if and v-else as follows:
new Vue({
el: '#app',
data(){
return{
limit_by:4
}
}
});
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div id="app">
<p v-if="limit_by===4">
<i class="fas fa-plus"></i>Visa fler...
</p>
<p v-else>
Visa färre
</p>
</div>
You can check the docs for more details.
Try to use conditional rendering with v-if and v-else directives :
<template v-if="limit_by===4">
<i class="fas fa-plus"></i>Visa fler...
</template>
<template v-else>
Visa färre
</template>
It is important to note that the use of double mustaches interprets the data as plain text, not html. I'm paraphrasing here but check out the v-html directive that is packaged with Vue on this page.
Using the v-html directive means you could still maintain the use of your ternary statement as follows:
<div v-html="limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre'"></div>
I'm making a list with 'v-for' where each item has to have an if with a different value corresponding the array, but the Vue not allows to create a 'v-if' expression starting from {{ i.some_data_to_evaluate }} .
Have a way to solve this?
Here is my code:
HTML
<div id='test' v-for="i in items">
<p v-if={{i.value}}>{{i.some_text}}</p>
<p v-else>{{i.other_text}}</p>
</div>
JS
let test = new Vue({
el: '#test',
data: [
{some_text: 'jhon', other_text: 'jonas', value:false},
{some_text: 'joao', other_text: 'maria', value:true}
]
})
I'm just trying to change the version that is in the Vue guide.
Here's the link: http://vuejs.org/guide/list.html
You should replace the brackets with quotes on the v-if directive:
<div id="test" v-for="i in items">
<p v-if="i.value">{{i.some_text}}</p>
<p v-else>{{i.other_text}}</p>
</div>
I'm using angular 1.4.5 with django v1.8 app, and trying to implement new layout for my website.
Here is my view:
<div class="page animsition" ng-app="AppUI">
<div class="page-content padding-30 blue-grey-500"
ng-controller="DisplayManageController">
<ul>
<li ng-repeat="feed in items">
<a>{{ feed.type }}</a>
<img ng-src="feed.obj.image"/>
<em ng-bind="feed.obj.text"></em>
</li>
</ul>
</div>
</div>
And the angular controller code:
var AppUI = angular.module('AppUI');
AppUI.controller('DisplayManageController', ['$scope', 'display', function ($scope, display) {
$scope._display = display.items({'id': 71});
$scope.items = [];
$scope._display.$promise.then(function (result) {
angular.forEach(result, function (value) {
$scope.items.push(value);
});
});
}]);
And html result after promise updates
<li ng-repeat="feed in items" class="ng-scope">
<a></a>
<img ng-src="feed.obj.image" src="feed.obj.image">
<em ng-bind="feed.obj.text" class="ng-binding">Blabla #somehashtagfromme</em>
</li>
Here is the content of "items"
[
{$$hashKey:"object:3",group_id: 1,id: "562a1a48942fbd0d9016617e",obj:{image:"https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12080420_855923527854550_1926591603_n.jpg",text:"Nefesler tutuldu"},type:"instagram"},
{$$hashKey:"object:2",group_id: 1,id: "5627a75e942fbd0d7ed19748",obj:{image:"https://pbs.twimg.com/media/CR2VePxUwAAVqtn.jpg", text:"bu zamanların ruhu"},type:"twitter"},
...
]
ng-repeat repeats all items as feed objects, but why curly braces and ng-src doesn't compile or returns empty values ?
Ps: I also tried ng-src={{feed.obj.text}} but result doesn't change ..
It should be ng-src="{{feed.obj.text}}". That's quotes and double curly brackets.
If that doesn't work, paste <pre>{{feed.obj | json}}</pre> after the </a> and before the <img>. That will let you see problems with the object.
Also, since you're using Django make sure your rendering the template raw. Otherwise django will think that the double curly brackets are django templates.
Here is a plunker of your code working:
http://plnkr.co/edit/khgxkLt2FjskrguWP5Js?p=preview
You do need curly braces around items being interpolated.
<ul>
<li ng-repeat="feed in items">
<a>{{ feed.type }}</a>
<img ng-src="{{feed.obj.image}}"/>
<em ng-bind="{{feed.obj.text}}"></em>
</li>
</ul>