I want to show Popover in v-for, this is my code:
<div #click="count++">add</div>
<div v-for="i in count">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">
Click to toggle popover
</button>
</div>
and js code:
$(function () {
$('[data-toggle="popover"]').popover()
})
let app = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: {
count: 0,
},
});
if the count value is by default 1, popover works.
But if the count value is by default 0 and then increased by #click="count++" ,popover doesn't show.
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>
I've encountered this error
Cannot read property 'target' of undefined
with an #click event while calling a method with a doThis().
But doThis worked fine
I would like to know what is the difference between
<button type="button" #click="doThis()" data-name="test">Test</button>
And
<button type="button" #click="doThis" data-name="test">Test</button>
with this method
methods: {
doThis(e) {
console.log(e.target.dataset.name);
}
}
Because the e which is the event object being handled is is undefined. You have to pass the object using global $event
<button type="button" #click="doThis($event)" data-name="test">Test</button>
Usually when you invoke the event handler manually is because you need to pass additional arguments to the function. As example
<div v-for="v in values" :key="v.id">
<button type="button" #click="doThis($event, v)" data-name="test">Test</button>
</div>
As I was typing this up, #Chay22 was able to help - for what it's worth, here is an example:
[CodePen Mirror]
const vm = new Vue({
el: "#app",
data: {
title: ''
},
methods: {
doTheNeedful(e) {
this.title = "Coming From: " + e.target.innerHTML;
console.log(e);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div>
<button #click="doTheNeedful">doTheNeedful</button>
<button #click="doTheNeedful($event)">doTheNeedful($event)</button>
<div v-if="title">
<p>{{ title }}</p>
<h3>Check console for event info</h3>
</div>
</div>
</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);
}
})
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
I am trying to learn vue.js and javascript, so this is probably easy for those who already have walked the path... so please show me the way...
I want to have a universal function that passes parameters so...
in HTML
I have a call to function with div id parameter
<button #click="showdiv('user_likes')" type="button" class="btn btn-default">+</button>
In vue all the div elements are by default false.
This is my function in Vue.js methods
changediv: function(data){
data==false ? data=true : data=false;
},
All hints are appreciated
Button without a method
To complement the existing answer, since this case is a simple toggle, you can reduce the amount of code by getting rid of the method showDiv entirely. This should not be used if you have more complex logic since it could compromise readability: https://jsfiddle.net/8pLfc61s/
HTML:
<div id="demo">
<button #click="showParagraph = !showParagraph">Toggle paragraph with button</button>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
}
})
Checkbox with v-model
Another cool trick is to use a checkbox with v-model, although in this case the amount of markup is increased, so probably not a worthy tradeoff: https://jsfiddle.net/v09tyj36/
HTML:
<div id="demo">
<label class="button">
Toggle Paragraph with checkbox
<input type="checkbox" v-model="showParagraph">
</label>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
}
})
Here's a fiddle that replicates what you're trying to to: https://jsfiddle.net/9wmcz2my/
HTML:
<div id="demo">
<button #click="showDiv('showParagraph')">Click me</button>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
},
methods : {
showDiv: function(param){
this[param] = !this[param]
},
}
})