update to vue2.7 with setup, vue2 render function can not work
{
label: '联系方式',
render: (h: any, scope: { row: OrgCustomerService}) => {
return h('span', null, scope.row.contactType === ContractType.Phone ? '电话客服' : '微信客服')
}
},
vue2.7 setup will tips [Vue warn]: createElement() has been called outside of render function.
#vue/composition-api is work before
Related
I need to call a method when dropdown value changes. Dropdown is in completely separate component from where i want to call a method. So i am using $root.
Trading.vue
<v-autocomplete
label="Entity"
v-model="tradingAs"
:items="getTradeEntities"
item-value="id"
item-text="entity"
hide-details
return-object
#change="tradeChange"
/>
tradeChange(){
this.$root.$emit('trade_as_event', this.tradingAs.id)
}
New.vue
data: () => ({
tradeAsAccount: null
}),
mounted: function(){
this.$root.$on('trade_as_event', function(data) {
this.tradeAsAccount = data
console.log(this.tradeAsAccount)
this.createQuoteConfig() //this line gives error
})
},
methods: {
createQuoteConfig() {
console.log('call api with updated id', this.tradeAsAccount)
}
}
Error:
Vue warn]: Error in event handler for "trade_as_event": "TypeError: this.createQuoteConfig is not a function"
(found in )
this in the anonymous function does not point to instance of current component. Actually it points to the $root.
mounted: function() {
const root = this.$root
this.$root.$on('trade_as_event', function(data) {
console.log(this===root); // true
})
}
There are two ways to solve the problem.
Option one: Arrow Function
In arrow functions, this retains the value of the enclosing lexical context's this.
this.$root.$on('trade_as_event', (data) => {
this.tradeAsAccount = data
console.log(this.tradeAsAccount)
this.createQuoteConfig()
})
Option two: Vue methods
All methods declared in Vue options will have their this context automatically bound to the Vue instance.
data: () => ({
tradeAsAccount: null
}),
mounted: function(){
this.$root.$on('trade_as_event', this.handleTradeAsEvent)
},
methods: {
handleTradeAsEvent(data) {
this.tradeAsAccount = data
console.log(this.tradeAsAccount)
this.createQuoteConfig()
},
createQuoteConfig() {
console.log('call api with updated id', this.tradeAsAccount)
}
}
I am new to VueJs, i have a props property and at the created hook i get the property data.
But i am receiving this message at the console :
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value.
Prop being mutated: "markets"
I declare markets at props section:
props: {
markets: Object
},
I get the property data at the created hook :
created() {
Axios.get('/api')
.then(response => {
this.markets = response.data
})
.catch(error => {
console.log('There was an error:', error.response)
}),
How can i adapt this situation to stop the warning messages ?
As documented in the official docs, this should be done as follows:
props: {
markets: Object
},
data: function () {
return {
innerMarkets: this.markets
}
}
Currently in vue code I have a page that has the following line:
<MyButton :my-click="generateSomeValues"/>
generateSomeValues, generates values and these then get set on the prop in the component.
MyButton is a component and inside it, it has the following:
#click.prevent="myloginButtonClicked" (The button has a click event which called the code below)
We then have the props and a methods:
props: {
myClick: {
type: Function,
default: undefined,
},
},
methods: {
async myloginButtonClicked() {
if (typeof this.myClick !== 'undefined') {
this.myClick();
}
}
},
Im trying to understand what this.myClick() is doing and how this could be tested using Jest. Looking at it, I would have thought myClick was just a prop and not a method?
Based on the code snippet
props: {
myClick: {
type: Function,
default: undefined,
}
},
You have indeed defined myClick as a prop. It is not a method. It is, however, a prop that happens to be a function, which means that it can be called.
To test it, you can use a Mock function
const mockMyClick = jest.fn(() => {});
const wrapper = shallowMount(MyButton, {
propsData: { myClick: mockMyClick }
});
const button = wrapper.find('button') // or whatever
button.trigger('click')
expect(mockMyClick.mock.calls.length).toBe(1);
I am playing around with VueJS and trying to make an api call from within a component:
var postView = {
props: ['post'],
template: '<li>{{ post.title }}</li>',
url: 'https://jsonplaceholder.typicode.com/posts',
data: function () {
return {
results: []
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
},
ready: function () { },
methods: {}
}
Vue.component('postitem', postView);
var app = new Vue({
el: '#app',
data: {},
ready: function () { },
methods: {}
})
I get the following error:
[Vue warn]: Property or method "results" is not defined on the
instance but referenced during render.
I am wondering what the best approach is to make api calls from within a component and display it on a HTML page. I learned that a component’s data option must be a function, but I'm not sure what the error related to 'results' means.
First of all you should consider using vue single file components. They are great for splitting your functionality.
Vue requests guide
You can watch the whole playlist for complete vue guide. The link is to the video that explains api calls in vue.
i think that error for (this)
you can do like that:
var vm = this;
axios.get(url).then(response => {
vm.results = response.data
})
I currently have a component with this render function:
render(createElement, context) {
return createElement(
'div', {
'class': 'sliced'
},
[
createElement('div', {
'class' : 'sliced-inner',
'style' : context.style
}
)
]
)
},
and I've added functional: true. The "style" is a computed value, but it doesn't seem to get passed with the context object. Is there any way to access computed values in a Vue render function?
A functional component has no state, so a computed property is redundant. In the following example I'm creating a header component that toggles between foo and bar when clicked:
Vue.component('message', {
render (createElement) {
return createElement('h1', {
on: {
click: event => {
return this.foo = !this.foo
}
}
}, this.fooBar)
},
computed: {
fooBar() {
return (this.foo) ? 'foo' : 'bar'
}
},
data(){
return {
foo: true
}
}
});
As you can see the header value is based on a computed, and it works fine because it is not a functional component so can have state: https://jsfiddle.net/hwbbukvd/
If I make that a functional component by adding functional: true, then it does not work because it's display relies on the component having state: https://jsfiddle.net/cygjdjru/
See: https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components
In your case, if you aren't looking for style to be reactive, then I'm guessing you just want to pass a prop
Vue.component('message', {
functional: true,
render(createElement, context) {
return createElement('h1', context.props.foo)
},
props: {
foo: {
required: true
}
}
});
See: https://jsfiddle.net/qhzh0a2c/