In the following code I expected everything to be rendered inline, but they are not. Why isn't the component rendered inline when it is a span?
<div id='app'>
<span v-for="ville in nomVilles">
<span>{{ville}} </span>
</span>
<liste-villes :villes ="nomVilles"></liste-villes>
</div>
Vue.component('liste-villes',{
template: '<span >\
<span v-for="ville in villes">\
<p>{{ville}} </p>\
</span>\
</span> ',
props: ['villes']
});
var vm = new Vue ({
el:'#app',
data: {
nomVilles:['Vancouver','Montreal']
}
})
The span element is an inline element, while the p tag is a block element.
You are trying to render a paragraph element inside a span tag, so it still takes up the entire block level, forcing the next span to not be inline.
Related
I am confused on how to hide and show 3 divs according to the click.
I have been able to show and hide 2 divs with v-show but v-show does not apply I think for more than 2 divs.
This is my code without vuejs, because I don't understand how to render with v-else-if
<div id="element_one">
ONE
<a>Go to two</a>
<a>Go to three</a>
Some content
</div>
<div id="element_two>
<a>Go back to one</a>
Some content
</div>
<div id="element_three>
<a>Go back to one</a>
Some content
</div>
app.js could be like this?
new Vue({
el: '#app',
data: {
isOne: true,
isTwo: true,
isThree: true
}
});
Sorry, I understand is a basic question but if you could guide me.
I saw what there is about v-else-if in the documentation but it is still not clear to me how to apply it.
I understand that each div applies a display none to it and when it is activated it disappears.
So basically it is, that two divs are in display none when the div that I accessed through its corresponding button is activated.
Thank you.
for using v if directive
<p v-if="inStock">{{product}}</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
and so on and the last is what`s below
<p v-else>..</>
you can also use v-show(note this toggles css property display:none)
<p v-show="showProductDetails">..</p>
<div id="element_one" v-if="visibleDivId == 1">
ONE
<a #click="showDivById(2)">Go to two</a>
<a #click="showDivById(3)>Go to three</a>
Some content
</div>
<div id="element_two v-if="visibleDivId == 2">
<a #click="showDivById(1)">Go back to one</a>
Some content
</div>
<div id="element_three v-if="visibleDivId == 3">
<a #click="showDivById(1)">Go back to one</a>
Some content
</div>
new Vue({
el: '#app',
data: {
visibleDivId: 1,
},
methods: {
showDivById(divId) {
this.visibleDivId = divId
}
}
});
You can write a function and use it to show or hide div on click.
we are building a chat application in Vuejs, now every chat message is component in our application, now whenever we are changing the value of one chat message, the value of all chat messages changes
What is happening
source code
App Component
const App = new Vue({
el: '#myApp',
data: {
children: [
MyCmp
],
m1: '',
m2: '',
m3: 'Hello world',
m4: 'How are you'
},
methods: {
sendMessage (event) {
if(event.key == "Enter") {
this.m2= this.m3;
this.children.push(MyCmp);
}
},
}
});
component code
let MyCmp = {
props: ['myMessage'],
template: `
<li class="self">
<div class="avatar"><img src="" draggable="false"/></div>
<div class="msg">
<p>{{ myMessage }}</p>
</div>
</li>
`
};
** view where components are generating **
<ol class="chat">
<template v-for="(child, index) in children">
<component :is="child" :key="child.name" v-bind="{myMessage: m3}"></component>
</template>
</ol>
Even though you are creating new components by pushing them into the children array, they are still getting bound to the same data via the line v-bind="{myMessage: m3}". Whenever you change m3, it will be passed down to all the child components and they will all render the same message.
This is an odd way of creating custom components since you could easily do so using the templating syntax or render function provided by Vue.
Solution 1 - Recommended
Change your approach - push message strings instead of card component definitions into children and use MyCmp inside v-for to render the message cards.
So the new template could be refactored as :-
<ol class="chat">
<template v-for="(message, index) in children">
<my-cmp :key="index" :my-message="message"></my-cmp>
</template>
</ol>
And inside App component, you can replace this.children.push(MyCmp) with this.children.push(messageVariable); where messageVariable contains the message that you receive from the input box.
Why is the recommended? This is a standard approach where component lists are rendered based on an array of data. It will be easier to scale and maintain.
Solution 2
You can use the v-once directive to bind the message one-time as static text. The binding won't be updated even if m3 changes on the parent.
Then MyCmp template will become :-
<li class="self">
<div class="avatar"><img src="" draggable="false"/></div>
<div class="msg">
<p v-once>{{ myMessage }}</p>
</div>
</li>
You bind myMessage of all your components instances with one variable m3. So, when m3 is changed myMessage in all instances changes respectively. Use another variable (e.g. msg) for rendering the message and then use myMessage property only for the initialisation of msg, like this:
let MyCmp = {
props: ['myMessage'],
data: function () {
return {
msg: this.myMessage
}
},
template: `
<li class="self">
<div class="avatar"><img src="" draggable="false"/></div>
<div class="msg">
<p>{{ msg }}</p>
</div>
</li>
`
};
I am new to Vuejs. This is what I need to do.
<div v-for="r in records">
<div v-if="r.something">
<div id="x">
{{ r. something}}
more of r here.
</div>
</div>
<div v-else id="x">
same div as in the block above.
</div>
</div>
What I want do is not define div with id x two times as it is huge.
Make your 'div' a component and refer to it in both places.
There are many ways to define your component. This is example shows just one. If you are using WebPack, use a single file component. You can then have your script, html, and css all in one file that gets precompiled. That's the best way to manage your 'huge' div. Then you can continue to refactor and break it up into more components.
const myComponent = {
template: "<div :id='id'>HELLO, my id is {{id}}. r.foo is {{r.foo}} </div>",
props: {
id: String
},
data() {
return {
r: {
foo: 'bar'
}
}
}
}
<div v-for="r in records">
<div v-if="r.something">
<my-component id='x' />
</div>
<div v-else id="x">
<my-component id='x' />
</div>
</div>
I had this issue while trying to render html into a vue component.
I am trying to insert component html through x-template. The issue is when I was trying to display the value {{i.value}} like this it was throwing error on console.
<script type="text/x-template" id="first-template">
<div>
<ul>
<li v-for="i in dataCollection">{{ i.id }}</li>
</ul>
</div>
</script>
Vue.component('menu', {
template: '#first-template',
data() {
return {
dataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}],
}
}
});
The error on console was:
But when I was giving value as attribute like:
<script type="text/x-template" id="first-template">
<div>
<ul>
<li v-for="i in dataCollection" :id="i.id"></li>
</ul>
</div>
</script>
it works perfect.
Anyone know any fix ?
You should not put script/x-template tages inside of the element that you mount to the main instance to. Vue 2.0 will read all of its content and try to use it as a template for the main instance, and Vue's virtualDOM treats script/x-template's like normal DOM, which screws everthing up,
Simply moving the template out of the main element solved the problem.
Source
This is a suggestion, not a answer.
As #DmitriyPanov mentioned, you'd better bind unique key when using v-for.
Another issue is you'd better to use non built-in/resevered html elements.
so change component id from menu to v-menu or else you like.
Then simulate similar codes below which are working fine.
I doubt the error is caused by some elements of dataCollection doesn't have key=id (probably you didn't post out all elements). You can try {{ 'id' in i ? i.id : 'None' }}.
Vue.component('v-menu', { //
template: '#first-template',
data() {
return {
newDataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}, {'xx':0}],
dataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}]
}
}
});
new Vue({
el: '#app',
data() {
return {testProperty: {
'test': '1'
}}
},
methods:{
test: function() {
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<v-menu></v-menu>
</div>
<script type="text/x-template" id="first-template">
<div>
<div style="float:left;margin-right:100px;">
<p>Old:</p>
<ul>
<li v-for="(i, index) in dataCollection" :key="index">{{ i.id }}</li>
</ul>
</div>
<div>
<p>Adjusted:</p>
<ul>
<li v-for="(i, index) in newDataCollection" :key="index">{{ 'id' in i ? i.id : 'None' }}</li>
</ul>
</div>
</div>
</script>
I think the problem here lies in the placement of the X-Template code (I had the same issue). According to the documentation:
Your x-template needs to be defined outside the DOM element to which Vue is attached.
If you are using some kind of CMS, you might end up doing just that.
What helped me in that case was (based on your example):
Placing the X-template script outside the #app
passing the collection as a prop to the v-menu component:
<v-menu v-bind:data-collection="dataCollection"></v-menu>
list dataCollection as a prop inside the v-menu component:
Vue.component('v-menu', { //
template: '#first-template',
props: [ "dataCollection" ],
...
});
I hope that helps anyone.
In 2.2.0+, when using v-for with a component, a key is now required.
You can read about it here https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component
This is a newbie question but I cannot find answer/hint online:
For a basic template that is rendered by a v-for loop:
<div id="app">
<ul class="list">
<v-ml_component v-for="data_item in get_data.Value"
v-bind:item="data_item"
v-bind:index="data_index"
v-bind:key="data_item.id"
v-bind:messageType="messageType">
</v-ml_component>
</ul>
</div>
<template id="list-template">
<li>
<span v-if="messageType.indexOf('inbox') >= 0">{{ item.MessageId }}</span>
<span>{{index}}</span> : {{ item.Subject }}
</li>
</template>
Everything is straight forward as in basic example, except I need to pass a prop to this component:
$.getJSON(mockAjaxUrl).done(function(ajaxdata){
var messageType = 'inbox';
Vue.component('v-ml_component', {
template:'#list-template',
props:['index', 'item', 'messageType']
});
var vm = new Vue({
el:"#app",
data:{
messageType: messageType,
get_data: ajaxdata
}
});
});
This would get error in console that messageType is not passed to this component. I wonder how the value of this property can be passed to a template that is rendered with a v-for loop?
The messageType prop will be message-type in HTML.
See camelCase vs. kebab-case in the Vue docs.