I've started learning Vue.js and I immediately hit a bump.
<body>
<div id="app">
<span v-if='show'>{{ message }}</span>
</div>
<ol>
<li v-for="todo in todos">
{{ todo }}
</li>
</ol>
</body>
var app = new Vue({
el: '#app', // elementul pe care il controleaza Vue
data: { // datele aplicatiei (model)
message: "Hello Vue",
show: true,
todos: [
"Learn JavaScript",
"Learn Vue.JS",
"Learn React",
"Be Free !"
]
}
});
Using the above code should display :
Hello Vue
1.Learn JavaScript
2.Learn Vue.JS
3.Learn React
4.Be Free !
Instead this is what I get:
Hello Vue
1.{{ todo }}
I am watching a video tutorial and my code is identical to the teacher's; his works, mine does not.
The console is empty. There is no error, no warning message, no nothing. It just does not work.
I have also tried using {{ todo.text }} but with no luck.
Your list is outside of the main div element, so it won't be part of the component's template.
Fix is:
<body>
<div id="app">
<span v-if='show'>{{ message }}</span>
<ol>
<li v-for="todo in todos">
{{ todo }}
</li>
</ol>
</div>
</body>
Related
I want to translate the title <h2>{{$t('vue.'+key.replace('contract_data.',''))}} :</h2> and messages <li>{{error}}</li>, my collegue tell me that transform all into a methods in vuejs but i don't know how to do.
this is my code:
<div v-if="getError">
<div v-for="(_errors, key) in getError">
<b-alert
v-for="error in _errors"
show
variant="danger"
>
<h2>{{ $t('vue.'+key.replace('contract_data.','')) }} :</h2>
<li>{{ error }}</li>
</b-alert>
</div>
</div>
What your colleague wants is that you extract the logic from the HTML to Javascript.
To solve this problem, your code could look like that:
template
<div v-if="getError">
<div v-for="(_errors, key) in getError">
<b-alert
v-for="error in _errors"
show
variant="danger"
>
<h2>{{ formatKey(key) }} :</h2>
<li>{{ error }}</li>
</b-alert>
</div>
</div>
script
export default {
methods: {
formatKey (key) {
return this.$t('vue.' + key.replace('contract_data.', ''))
}
}
}
Bonus: From a personal stand point I would suggest to add a key attribute to your v-for directives. (Doc: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State)
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>
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>
Recently, I've encountered a problem when trying to combine vuejs's v-for wih Unslider
My Html
<div class="my-slider" >
<ul>
<li>
<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>
</li>
</ul>
</div>
My Js for unslider
jQuery(document).ready(function($) {
$('.my-slider').unslider({
autoplay:true
});
});
v-for and unslider works well when they are seperated. But I want to combine them. It would be greatful if anyone can help me out of this.
You can wrap unslider plugin as vue component and use it.
//code using the un-slider component
<div class="browser">
<un-slider>
<ul>
<li v-for="i in 6"> {{ i }} is an item </li>
</ul>
</un-slider>
</div>
//defining template for unslider component
<template id="unslider-template">
<div class="my-slider" v-el:slider>
<slot></slot>
</div>
</template>
//initialize vue
new Vue({
el:".browser",
components:{
// as it is a simple component, I have written the code here.
// you should not write it here.
UnSlider: {
template:"#unslider-template",
ready: function(){
jQuery(this.$els.slider).unslider();
}
},
}
});
Demo
PS: I am unable to get css working. No idea why it is not working.
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.