When the following component was inline, it was able to access rowData but as a referenced template it can't:
HTML:
<div id="app">
<div>
<row-component v-for="(row, index) in rows" :row-data="row" v-on:delete-row="deleteThisRow(index)"></row-component>
</div>
</div>
<script id="theRow" type="x-template">
row component: {{rowData}}
<button #click="$emit('delete-row')">Delete3</button>
</script>
JavaScript:
Vue.component('row-component', {
props: ["rowData"],
template: '#theRow'
})
new Vue({
el: '#app',
data: {
rows: ["line1", "line2", "line3", "line4", "line5"]
},
methods: {
deleteThisRow: function(index) {
this.rows.splice(index, 1);
}
}
})
How can I get the component to recognize rowData?
https://jsfiddle.net/edwardtanguay/k1tx3z1n/
Components should have only one root element
<div id="app">
<div>
<row-component v-for="(row, index) in rows" :row-data="row" v-on:delete-row="deleteThisRow(index)"></row-component>
</div>
</div>
<script id="theRow" type="x-template">
<div>
row component: {{rowData}}
<button #click="$emit('delete-row')">Delete3</button>
</div>
</script>
See the working fiddle
Related
I am working in Vuejs.
How to replace div tag to button tag ?
In DOM,
<div class="prev">prev</div>
<div class="next">next</div>
I want to make like this
<button class="prev">prev</button >
<button class="next">next</button >
Please help.
You could use dynamic component component (doc)
const app = new Vue({
el: '#app',
data: {
tagName: 'div'
},
methods: {
toggle(tagName) {
this.tagName = tagName
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<component :is="tagName" class="prev">Prev</component>
<br/>
<component :is="tagName" class="next">Next</component>
<br/>
<button #click="toggle('div')">Change To Div</button>
<button #click="toggle('button')">Change To Button</button>
</div>
The problem of not showing information is delayed in fetching , i need any help for this problem.
<h1>#{{message}}</h1>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-10"><h3 class="panel-title">Experience</h3></div>
<div class="col-md-2 text-right">
<button class="btn btn-success">Ajouter</button>
</div>
</div>
</div>
<div class="panel-body" >
<ul class="list-group">
<li class="list-group-item" v-for="experience in experiences" >
<div class="pull-right">
<button class="btn btn-warning btn-sm">Editer</button>
</div>
<h3>#{{experience.titre}}</h3>
<p>#{{experience.body}}</p>
<small>#{{experience.debut}} - #{{experience.fin}}</small>
</li>
</ul>
</div>
</div>
Vuejs
<script src="{{asset('js/vue.js')}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Nawfal Kharbouch',
experiences:[]
},
methods:{
getExperiences:function(){
axios.get('http://localhost:8080/getexperiences').then(response=>{
this.experiences=response.data;
console.log(this.experiences);
}).catch(function(error){
console.log('erros : ',error);
})
}
},
mounted:function(){
this.getExperiences();
console.log(this.experiences);
}
})
</script>
The problem of not showing information is delayed in fetching , i need any help for this problem.
//console Google Chrome
[__ob__: Observer]
vue.js:8553 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
backend.js:1 vue-devtools Detected Vue v2.5.16
5:171 (3) [{…}, {…}, {…}, __ob__: Observer];
//picture view vide
Instead of using this directly you need to pass it to a variable.
methods:{
getExperiences:function(){
var vm = this
axios.get('http://localhost:8080/getexperiences').then(response=>{
vm.experiences=response.data;
console.log(vm.experiences);
}).catch(function(error){
console.log('erros : ',error);
})
}
},
You can not pass "this" inside a promise, you need to add "this" to a variable.
Exemple:
var app = new Vue({
el: '#app',
data: {
message: 'Nawfal Kharbouch',
experiences:[]
},
methods:{
var self = this;
getExperiences:function(){
axios.get('http://localhost:8080/getexperiences').then(response=>{
self.experiences=response.data;
console.log(self.experiences);
}).catch(function(error){
console.log('erros : ',error);
})
}
},
mounted:function(){
this.getExperiences();
console.log(this.experiences);
}
})
I am rendering a list of store titles in VueJS, some of them have a url property, some of them don't. If the title has a url, I want to add a a href property:
<div v-for="(store, index) in stores">
<span v-if="store.link"><a :href="store.link" target="_blank">{{ store.title }}</a></span>
<span v-else="store.link">{{ store.title }}</span>
</div>
This works, but the code looks duplicated. Is there anyway to simplify the code further?
you can use component tag:
var app = new Vue({
el: '#app',
data () {
return {
stores: [
{title:'product1',link:'/products/222'},
{title:'product2'},
{title:'product3',link:'/products/333'},
{title:'product4'}
]
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div v-for="(store, index) in stores">
<component :is="store.link?'a':'span'" :href="store.link || ''" target="_blank">{{store.title}}
</component>
</div>
</div>
I'd remove the first span element, as it's not necessary. Also, the v-else does not need the conditional statement (it's not v-else-if):
new Vue({
el: '#app',
data: {
stores: [
{ link: 'foo', title: 'foo-text' },
{ title: 'bar-text' }
]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(store, index) in stores" :key="index">
<a v-if="store.link" :href="store.link" target="_blank">{{ store.title }}</a>
<span v-else>{{ store.title }}</span>
</div>
</div>
You can use dynamic arguments in vue3
https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments
<a v-bind:[attributeName]="url"> ... </a>
or binding an object of attributes
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
It's convenient to group data into nested object properties. By doing this, we don't have to collect properties from the data field into an entity for later use. As in the following example,
var demo = new Vue({
el: '#demo',
data: {
level1: {
level2: {
level3_1: 'Hello',
level3_2: 'world'
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo">
<div class="person">
<h3>{{ level1.level2.level3_1 }}</h3>
<p>{{ level1.level2.level3_2 }}</p>
</div>
</div>
However, it's really overkill having to type the "level1.level2" prefix in order to get to the level3_x field. It'll be very cumbersome if there're loads of level3 fields.
I wonder if there is any way that I can save the work for typing level1.level2 over and over again. Does the template have any syntax so that some section is under the scope of "level1.level2"? Does Vue provide any support so that in this case the prefix "level1.level2" is assumed?
There are a couple of options.
1. Use v-for
Everything inside the v-for block is scoped to the level that you're iterating over. Do it like this:
var demo = new Vue({
el: '#demo',
data: {
level1: {
level2: {
level3_1: 'Hello',
level3_2: 'world'
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo">
<div class="person">
<template v-for="(l2prop, l2propName) in level1">
<h3>{{ l2prop.level3_1 }}</h3>
<p>{{ l2prop.level3_2 }}</p>
</template>
</div>
</div>
2. Use a component
Components get a subset of their parent's data, so they're automatically scoped. Do it like this:
Vue.component( "person", {
props: ['data'],
template: '<div class="person"><h3>{{ data.level3_1 }}</h3><p>{{ data.level3_2 }}</p></div>'
});
var demo = new Vue({
el: '#demo',
data: {
level1: {
level2: {
level3_1: 'Hello',
level3_2: 'world'
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo">
<person v-bind:data="level1.level2"></person>
</div>
The example of #jason-smith is almost right. v-for is used for arrays or lists. To make it work is necessary to put your object in list.
Following his example the better approach would be
var demo = new Vue({
el: '#demo',
data: {
level1: {
level2: {
level3_1: 'Level 3_1',
level3_2: 'Level 3_2'
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="person">
<template v-for="level2Obj in [level1.level2]">
<h3>{{ level2Obj.level3_1 }}</h3>
<p>{{ level2Obj.level3_2 }}</p>
</template>
</div>
</div>
There are serval ways:
Use a method that gets the same level
methods:{
getLvl3: function(nr){
return this["level"+nr]["level"+nr]["level3_"+nr];
}
{{ getLvl3(1) }}
Iterate over with v-for v-for docu
example:
<div id="demo">
<div class="person">
<template v-for="(lvl2, key) in level1">
<template v-for="(lvl3, key) in lvl2">
<h3 v-if="key === 'level3_1'>{{ lvl3 }}</h3>
<p v-if="key === 'level3_2'">{{ lvl3 }}</p>
</template>
</template>
</div>
</div>
bind to variable that is defined outside of vue:
var nested = { level1: { level2: { level3_1: 'Hello', level3_2: 'world' }}
and inside of vue component or instance:
data:{
level2: nested.level1.level2,
}
<div id="demo">
<div class="person">
<h3>{{ level2.level3_1 }}</h3>
<p>{{ level2.level3_2 }}</p>
</div>
</div>
I just want to change the value of msg，but all the instruction(v-for,v-text,v-bind) of the Vue will re-execute . How to solve this problem?
<div class="container">
<div id="app">
<div v-for="item in list">
<div> {{item.name}} </div>
<div>{{Math.random()}}</div>
</div>
<div>{{Math.random()}}</div>
<div>{{msg}}</div>
<input type="text" v-model='msg'>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
list: [{ name: "I am Tom" }, { name: "I am Mary" }],
msg: "hello"
}
})
</script>
Because you embedded Math.random() in the template for the VUe, every time the DOM for the Vue needs to be updated (as in when you change msg), a new value will be calculated. One way you might solve this is to initialize the random value when the Vue is created.
var app = new Vue({
el: "#app",
data: {
list: [{ name: "I am Tom" }, { name: "I am Mary" }],
msg: "hello",
random: Math.random()
}
})
And then use the initialized value in your template.
<div id="app">
<div v-for="item in list">
<div> {{item.name}} </div>
<div>{{random}}</div>
</div>
<div>{{random}}</div>
<div>{{msg}}</div>
<input type="text" v-model='msg'>
</div>
Another way you might solve the issue is to isolate the changes to msg in their own scope (a component).
Vue.component("message", {
props:["msg"],
template:`
<div>
<div>{{internalMessage}}</div>
<input type="text" v-model='internalMessage'>
</div>
`,
data(){
return {
internalMessage: this.msg
}
}
})
var app2 = new Vue({
el: "#app2",
data: {
list: [{ name: "I am Tom" }, { name: "I am Mary" }],
msg: "hello",
}
})
And the template:
<div id="app2">
<div v-for="item in list">
<div> {{item.name}} </div>
<div>{{Math.random()}}</div>
</div>
<div>{{Math.random()}}</div>
<message :msg="msg"></message>
</div>
Here is an example of both approaches.