My code is like this :
<script>
export default {
props:['search','category','shop'],
created(){
...
},
data(){
return{
loading:false
}
},
computed:{
...
list:function(){
console.log(this.$store.state.product);
return this.$store.state.product.list
},
},
methods:{
...
}
}
</script>
I do : console.log(this.$store.state.product); in list method
Then, I check it on the console
The result is like this :
I want display value of name
I try like this :
console.log(this.$store.state.product.list.id.name);
There exist error :
Uncaught TypeError: Cannot read property 'name' of undefined
How can I solve the error?
The list is an object, with the keys being the different element id's - you are currently trying to access like this:
this.$store.state.product.list.id.name
You are getting that error because there is no id key in the list object, you need to replace .id with the actual id value, like this:
this.$store.state.product.list["12"].name; //"Bunga Gandeng"
Related
Im trying to test a method of a component that adds a new entry to an already existing object.
addTag: function () {
this.value[this.field.key].push(this.tag)
this.tag = ''
}
I am just trying to call that method inside my test via
wrapper.setProps({
field: {
key: 'tag'
},
value: {
tag: {}
}
})
...
wrapper.vm.addTag()
but it throws and error
TypeError: this.value[this.field.key].push is not a function
Ive set all needed data and props beforehand (field.key and tag), so that's not the problem. running other methods works completly fine, push seems to be the problem
This is because this.value['tag'] is an object, not an array, so there is no push method.
Defining it as an array instead would change that:
wrapper.setProps({
field: {
key: 'tag'
},
value: {
tag: []
}
})
How can I use the return value of a computed property inside a data element that is rendered as HTML?
I have a data element that is HTML, and it looks like this:
contractContent: `<p>Hi ${this.brideName},</p>`
I've also tried this:
contractContent: `<p>Hi {{this.brideName}},</p>`
I am trying to pass in the name via this computed property:
brideName() {
return this.returnContracts[0].brideName.split(' ')[0]
},
But all I'm getting is undefined. If I just put brideName on the component as a test, it returns the first name of the bride just fine.
Where did I go astray?
Here is a fiddle with my dilemma
data() is invoked on component creation and is not reactive. contractContent should be a computed prop for your code to work:
export default {
data() {
return {
name: "Martina Navratilova",
}
},
computed: {
brideName() {
return `<p>Hi ${this.name.split(' ')[0]},</p>`
},
contractContent() {
return `<p>Hi there ${this.brideName}</p>`
},
},
}
updated fiddle
Instead of going with data -> computed -> data -> render,
go directly with computed -> render (html)
In your template you can render html like this
<span v-html="brideName" />
assuming your data structure of returnContracts to be like this
data: {
returnContracts: [
{
"brideName": "Emma Watson"
}
]
}
Then you can directly render brideName from computed
brideName(){
// assuming you'll have correct data, if data isn't valid this will cause crash.
return `<p>Hi ${this.returnContracts[0].brideName.split(' ')[0]},</p>`
}
here is a fiddle to help you out implementation
I have an array of objects like
[
{
"id":17368,
"creationDate":1566802693000,
"status":"InProgress",
"type":"NEW",
"agentType":"Master"
},
{
"id":17368,
"creationDate":1566802693000,
"status":"InProgress",
"type":"NEW",
"agentType":"Master"
},
{
"id":17368,
"creationDate":1566802693000,
"status":"InProgress",
"type":"NEW",
"agentType":"Master"
},
{
"id":17368,
"creationDate":1566802693000,
"status":"InProgress",
"type":"NEW",
"agentType":"Master"
}
]
But when trying to access the object property 'id' using console.log(array[0].id) throws a "cannot read property id of undefined error"
However just logging the first object with console.log(array[0]) prints the object successfully.
{id: 17368, creationDate: 1566802693000, …}
Also printing the list of ids using array.map(x => console.log(x.id)) prints the list of ids successfully .
I am in a situation where i need to access the first few specifically . Where am i going wrong ?
try this console.log(array[0] && array[0].id)
or you can use get from lodash-es like this:
import { get } from 'lodash-es'
const id=get(array[0], 'id', '')
I want to create rootStore which contains others store. The problem is that the children contain properties like:
id: types.identifier(types.string),
And when I create the rootStore, I get an error from the child:
[mobx-state-tree] Error while converting {} to SomeModelStore: at path "/id" value undefined is not assignable to type: identifier(string) (Value is not a string), expected an instance of identifier(string) or a snapshot like identifier(string) instead.
I tried to use types.late but it did not help.
The solution I found is to wrap all properties into types.maybe
Examples:
error:
https://codesandbox.io/s/yvnznxyvyj?module=%2Fmodels%2FSomeModelStore.js
workaround:
https://codesandbox.io/s/0mv558yq50?module=%2Fmodels%2FSomeModelStore.js
Here https://codesandbox.io/s/yvnznxyvyj?module=%2Fmodels%2FSomeModelStore.js you create an empty object
.model("FirstStore", {
item: types.optional(SomeModelStore, {})
})
but type
SomeModelStore
didn't support empty fields. If you write like this
export const FirstStore = types
.model("FirstStore", {
item: types.optional(SomeModelStore, {
id: 'defaultId',
activate: false,
name: 'defaultName'
})
})
it will work. Or you can use "types.maybe" instead of "types.optional".
export const FirstStore = types
.model("FirstStore", {item: types.maybe(SomeModelStore)})
Also read about types.reference
I think it's a better way to use it in your case.
I have following JSON structure:
var pages = {
"yearly": {
"MXN": {
"id" : "2c92c0f940f1b6e50140f4b7d9054a6e",
},
"NZD": {
"id" : "2c92c0f940f1b6d40140f4b7e14d66b7",
}
},
"monthly": {
"MXN": {
"id" : "2c92c0f940f1b6d40140f4b40ed85c57",
},
"NZD": {
"id" : "2c92c0f840f1c2cc0140f4b3b15d3956",
}
}
}
i want to get the values of json inside yearly property dynamically for example i get the dynamic value MXN inside a variable currency now i am having problem in accessing its value i am trying to access it like this:
pages.yearly[currency].id
but i am unable to get to that id property gives me error of TypeError: pages.monthly[currency] is undefined what is wrong in my syntax that is causing type error??
The according to this error the variable currency needs to be defined. For example
var currency = "MXN";