I am using vue-tables2 in my app.With the help of 'template' property avilable in vue-table2 options I am able to modify the format of the data.
The sample code is given below
data: {
columns: ['erase'],
options: {
...
templates: {
erase: function (h, row, index) {
return this.test();
}
}
...
},
methods: {
test() {
return 'test';
}
}
}
The code works fine, but when I trying to call a function inside the template it's showing below error
TypeError: this.test is not a function
How can I call a function inside vue-table2 template property?
this refer current fuction scope . You use inside erase function so that this refer to erase function , not vue instance .
You can do by setting global variable window but I am not quite recommend that .
Example
set vue instance in mounted scope
mounted: function() {
window.vm = this // assign vue instance to global window
}
Then use in your erase scope like below
erase: function (h, row, index) {
return window.vm.test();
}
Related
I want to declare a global array inside vue.js component, so that I can access it in all the methods. Where do I declare it in which part of component?
I have tried setting in PROPS but it produces an object while I need an array type.
export default{
name:"BarElement",
props:[
"labels",
"dataset",
"colors"
],
methods:{
drawGraph() {
var dataPoints =[];
var dataPoint =this.getDataPoint(upperLeftCornerX,nextX,value);
this.dataPoints.push(dataPoint);
}
getDataPoint(x, nextX, value) {
return {
'leftEdge':x,
'rightEdge':nextX,
'value':value
}
},
showToolTip(event) {
var mouseX = event.offsetX;
var toolTipVal = this.dataPoints.forEach(function(item, key) {
if(mouseX >= item.leftEdge && mouseX <= item.leftEdge )
return item.value;
});
console.log(toolTipVal);
}
}
Try to declare it inside the data object
data () {
myArray:[]
}
You can also declare props as an object, as this will allow to specify the type of the props
props: {
labels: Array,
dataset: Array,
colors: Object
}
If you want all your components of that type to share the same array, declare it outside of the export default statement.
Well, Inside your component you can declare with data as function and that will be locally to your function.
name: "BarElement",
props: ["labels", "dataset", "colors"],
data: function() {
return {
foo: {
text: 'text1'
}
}
}
In case If you want to declare a global array in your app component.
Similar to the component, you can able to add the data inside it.
Now, to access that data, you can use it with this.$root.[nameOfObject].
Here are the official docs for $root
Hope this helps!
I declare variable in main.js:
data: {
globalData: {}
}
I want to avoid using this.$root.globalData all the time — so I use local variable in a component as an alias to "global variable":
data() {
return {
localAlias: this.$root.globalData,
}
}
Then I fetch global variable from a server in main.js (simulate by setTimeout):
create() {
window.setTimeout(() => {
this.globalData = {a:1, b:2};
}, 1500);
}
And localAlias remains equal to initial value.
How to make it work? I don't need Vuex yet, I just grab data from server and use it read-only.
Example
Instead of using data you can use computed. It will solve your problem.
computed: {
localAlias: function() {
return this.$root.globalData;
}
}
I have updated the example
The reason localAlias doesn't change is because it still points to the same object, while you re-point this.$root.globalData to a new object. One way to do it is of course to use computed as the other answer suggested. Another way to solve it it to just change the properties instead of re-binding the entire object:
create() {
window.setTimeout(() => {
this.globalData.a = 1;
this.globalData.b = 2;
}, 1500);
}
This is less versatile though and will scale worse if the object becomes bigger.
My code like this:
<tempalte>
<div>{{contents}}</div>
</tempalte>
<script>
{
//...something
data: function() {
return { contents: null }
},
methods: {
test() {
console.log(this.contents)
}
},
created () {
// do something...
this.contents = someValue
this.test()
}
}
</script>
And when created excuted then call test methods, the print result is old value null.
But the {{contents}} is the new Value.
How can I get new value of data in methods after created assign new value and call the methods ?
I has already fixed it. If I call methods in updated (), it can work.
If you want to know the reasons, you can read this post:
https://v2.vuejs.org/v2/guide/reactivity.html
data: {
addItemArray: [],
}
I have initialize one array inside data and then inside methods i am added some code:
var self = this;
{
self.cacheDom.$submitItem.click(function () {
self.addItemArray.push({
‘id’: $(’#accountSearch’).data(‘id’).trim(),
‘name’: $(’#accountSearch’).val().trim(),
‘type’: $(’#accountDropdown option:selected’ ).text().trim()
});
$(’.addItemMenu’).hide();
});
}
i pushing the data into addItemArray. Then another one click function inside methods that time i need the addItemArray items. But i getting always a empty array.
Thanks
I had an API call to the backend and based on the returned data, I set the reactive data dynamically:
let data = {
quantity: [],
tickets: []
}
api.default.fetch()
.then(function (tickets) {
data.tickets = tickets
tickets.forEach(ticket => {
data.quantity[ticket.id] = 0
})
})
Based on this flow, how can I set watcher for all reactive elements in quantity array dynamically as well?
You can create a computed property, where you can stringify the quantity array, and then set a watcher on this computed property. Code will look something like following:
computed: {
quantityString: function () {
return JSON.stringify(this.quantity)
}
}
watch: {
// whenever question changes, this function will run
quantityString: function (newQuantity) {
var newQuantity = JSON.parse(newQuantity)
//Your relevant code
}
}
Using the [] operator to change a value in an array won't let vue detect the change, use splice instead.