When I'm trying to use Template strings inside the data function in vuejs but, it always returns undefined any idea how to solve this ?
I was trying to make a URL for an API call dynamic
Cheers,
data() {
return {
baseUrl: `https://example.com/api/json?key=${this.key}`,
key: "IzNDU2Nzg5MDEyMzQ1Njc"
};
}
This is a JavaScript issue. If you run the following simple example in JavaScript you'll get a "is not defined" error (when running in strict mode).
{ a: `${b}`, b: "123" }
> VM246:1 Uncaught ReferenceError: b is not defined
You can't reference an adjacent variable ('key' in your example) in an object literal declaration.
You can use a Vue.je computed property for baseURL:
computed: {
baseUrl() {
return `https://example.com/api/json?key=${this.key}`;
}
}
The data property cannot be made dynamic. Use a computed property like below:
computed: {
baseUrl() {
return `https://example.com/api/json?key=${this.key}`
}
}
Related
React native is having difficulties parsing JSON three levels deep. The object is structured like so:
data: {
post: {
user1: {
name: "user name"
}
}
}
data.post.user1 works fine and returns an object; however, when I try to get the name parameter react-native throws the following error:
undefined is not an object (evaluating 'data.post.user1.name')
Is this a known issue? I am getting data from response.json in a fetch call. EDIT: Object.keys(data.post.user1) returns the same error.
First, declare it in a variable and then make an object :
const data = {
date:{
post: {
user1: {
name: "user name"
}
}}}
Get the value like this :
<Text>{data.date.post.user1.name}</Text>
How to retrieve data from a specific getters in vue?
this.$store.getters('client/list'))
TypeError: _this.$store.getters is not a function
at eval (Login2.vue?3936:64)
Step 1: Set the getter in the store.
getters: {
clientList: state => {
return state.clientList
}
}
Step 2: Call the getter in your component as computed
computed: {
clientList () {
return this.$store.getters.clientList
}
}
Check your syntax. The getter you posted won't work because you're missing the module-specific syntax.
As an example from the following link:
this.$store.getters['ModuleA/getCategory'](this.index)
See more here: Vue.js 2/Vuex - How to call getters from modules that has attribute namespaced:true without mapGetters?
My computed property receives information from a store action (with an axios call in it) when component mounts initially. However I need to change its value directly later on:
myComputedProperty: {
get: function () {
return this.myStoreActionResult;
},
set: function (newValue) {
return newValue
}
}
With this setup however, I can't change its value:
console.log(this.myComputedProperty)
this.myComputedProperty = 'new value!'
console.log(this.myComputedProperty)
I expected this to display the initial value (based on store information) and then the new value. Instead, it displays twice the initial value: I can't change the computed property's value directly.
Is there a way to achieve that, and if so how?
Computed properties are used for returning a calculated (and cached) value, so you cannot directly set value of it because it doesn't exists at all. Behind computed property are variables that you can set with setter, like in your example. All you need is set new value of referencing variable:
myComputedProperty: {
get: function () {
return this.myStoreActionResult;
},
set: function (newValue) {
this.myStoreActionResult = newValue;
return newValue
}
}
Using computed variable like in example above is useless, because you indirectly modify original property.
Yes, it's possible.
Refer to Vue.js documentation here: Computed Setter
Your code would become something like this:
myComputedProperty: {
get: function () {
return this.myStoreActionResult;
},
set: function (newValue) {
this.myStoreActionResult = newVaue;
}
}
I have a Vue.js app running with a GraphQL backend, and Gridsome as the Vue.js boilerplate generator.
I'm trying to write a GraphQL query to only return the data of the logged in user, like this :
query Blah($test: String!) {
db {
settings (where: {user_id: {_eq: $test}})
{
key
value
}
}
with the $test variable defined here:
export default {
data() {
return {
test: "Va123",
user: null
};
}
}
But I get this error message:
An error occurred while executing query for src/pages/Profile.vue
Error: Variable "$test" of required type "String!" was not provided.
This is for a Girdsome page, not a template
It looks like the only way is to create pages programmatically using createPage() and pass the page context variable down the the page-query.
https://gridsome.org/docs/pages-api/#the-page-context
(ExtJS 4.0.7)
I'm using Model.save() to PUT an update to a server. Everything works fine and the server returns a simple JSON response {success: true} (HTTP status 200). Model.save() throws the following error, however:
Uncaught TypeError: Cannot read property 'data' of undefined
Here's where this is happening in the ExtJS code (src/data/Model.js):
save: function(options) {
...
callback = function(operation) {
if (operation.wasSuccessful()) {
record = operation.getRecords()[0]; <-- getRecords() return an empty array
me.set(record.data); <-- record is undefined, so .data causes error
...
}
I've figured out this is happening because Model.save() expects the server to respond with JSON for the entire object that was just updated (or created).
Does anyone know of a clever way to make Model.save() work when the server responds with a simple success message?
I was able to come up with a work-around by using a custom proxy for the model, and overriding the update function:
Ext.define('kpc.util.CustomRestProxy', {
extend: 'Ext.data.proxy.Rest',
alias: 'proxy.kpc.util.CustomRestProxy',
type: 'rest',
reader : {
root: 'data',
type: 'json',
messageProperty: 'message'
},
// Model.save() will call this function, passing in its own callback
update: function(operation, callback, scope) {
// Wrap the callback from Model.save() with our own logic
var mycallback = function(oper) {
// Delete the resultSet from the operation before letting
// Model.save's callback use it; this will
oper.resultSet = undefined;
callback(op);
};
return this.doRequest(operation, mycallback, scope);
}
});
In a nutshell, when my proxy is asked to do an update it makes sure operation.resultSet == undefined. This changes the return value for operation.getRecords() (which you can see in the code sample from my question). Here's what that function looks like (src/data/Operation.js):
getRecords: function() {
var resultSet = this.getResultSet();
return (resultSet === undefined ? this.records : resultSet.records);
}
By ensuring that resultSet == undefined, operation.getRecords returns the model's current data instead of the empty result set (since the server isn't returning a result, only a simple success message). So when the callback defined in save() runs, the model sets its data to its current data.
I investigate this problem and found truly simple answer. Your result must be like this:
{
success: true,
items: { id: '', otherOpt: '' }
}
And items property MUST be equal Model->Reader->root property (children in tree for example).
If you want to use items instead children you can use defaultRootProperty property in Store and configure your nested collections as you want.
PS
Object in items property must be fully defined because it replaces actual record in store.