We Keep Coding

Understanding the order of properties execution in Vuejs [duplicate]

This question already has answers here:
Access vue instance/data inside filter method
(3 answers)
Closed 2 years ago.
I'm creating a simple Vuejs div component (to show a specific value) which needs to receive: a lists, a placeholder and a value as props. What I'm trying to do is displaying the value with the data from my database, if the user picks a new value from the lists, it should take that new value and display it. However, if the user never picks a new value and the data from the database is empty, it should display the placeholder.
So I have used filters to achieve this. However, it outputs an error: "Cannot read property 'lists' of undefined", which comes from the filters (I know because it outputs no error if I comment out the filters). When I changed the filter to this:
filters: {
placeholderFilter () {
return this.placeholderText || this.placeholder
}
}
It says:""Cannot read property 'placeholderText' of undefined"". So I was wondering if the filters properties executed before the data and props properties. What is the execution order of them? I have attached some of the relevant code down below. Anyway, If you could come up with a better way to achieve this. I would appreciate it!
Here is my component:
<template>
<div>{{ placeholderText | placeholderFilter }}</div>
<li #click="pickItem(index)" v-for="(list,index) in lists" :key="index">{{ list }}</li>
</template>
<script>
export default {
props: {
lists: {
type: Array,
required: true
},
value: {
type: [String, Number],
default: ''
},
placeholder: {
type: String,
default: ''
}
},
data () {
return {
selected: -1,
placeholderText: this.value || this.placeholder
}
},
methods: {
pickItem (index) {
this.selected = index
}
},
filters: {
placeholderFilter () {
return this.lists[this.selected] || this.placeholderText || this.placeholder
}
}
}
</script>
And this is where I use it:
<my-component
placeholder="Please type something"
value="Data from database"
lists="['option1','option2','option3']"
>
</my-component>

Filters aren't bound to the component instance, so they simply don't have access to it through the this keyword. They are meant to always be passed a parameter and to return a transformed version of that parameter. So in other words, they're just methods. They were removed in Vue 3 entirely probably for that reason.
And yeah, what you're looking for here is a computed!

Vue - use computed property inside HTML data

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

Vuex v-model to an object state field

I have a Vuex state, like this (it also has a getter, named configs:
configs: {
1303401: {
exampleValue: 'test'
}
}
I also have an input where I v-model the exampleValue from the Vuex store's state:
<input type="text" v-model="config.exampleValue" />
Here is the computed property I use to return the config:
config: {
get () {
return this.$store.getters.configs[1303401]
},
set (value) {
//this should set the configs[1303401] field with the updated exampleValue
this.$store.dispatch('UPDATE_CONFIG', value)
}
}
The input's value changes to the value of config.exampleValue, so the computed data is not undefined, but the Vuex state does not update.
Also if I try to console.log the value in the setter, nothing appears in the console, so the setter isn't even executed
It is probably because it is not setting the config computed property, but the config.exampleValue, but I have no idea, how to handle that.
As #asi-ple mentioned above, changing the get to return configs[1303401].exampleValue would work, but the problem is, that the config has more fields, and the page has more inputs, and I'd need to create a computed property for all fields this way.

Actually you can make some logic here if you have more than fields.
Lets say that you have
configs: {
1303401: {
exampleValue: 'test',
exampleValue2: 'test2',
exampleValue3: 'test3',
...
}
}
Than you should change template to that:
<input type="text" :value="config[1303401].exampleValue1" #input="update_config($event, 'exampleValue1')" />
<input type="text" :value="config[1303401].exampleValue2" #input="update_config($event, 'exampleValue2')" />
<input type="text" :value="config[1303401].exampleValue3" #input="update_config($event, 'exampleValue3')" />
And your methods like this
methods:{
update_config($event, where){
this.$store.commit("UPDATE_CONFIG", {value: $event.target.data, where: where})
}
}
Then your mutation handler looks this
UPDATE_CONFIG(state, payload){
state.configs[1303401][payload.where] = payload.value
}
Basically above code, your making a config data in your state which should use two-way data binding in your template. Then you are creating your inputs :value working like get methods, and #input listener is working like set methods, then update_config is committing your changes and mutation handler setting them with right place

I think it's because you use v-model with property of the get object, and setter is not working on it.
You can just work with property only, here is how your computed property would look:
config: {
get () {
return this.$store.getters.configs[1303401].exampleValue
},
set (value) {
this.$store.dispatch('UPDATE_CONFIG', value)
}
}
and template:
<input type="text" v-model="config" />
So you will get new exampleValue value in your store action. And try to avoid using objects for getter/setter in computed properties (with forms), it has a lot of hidden traps.

Specify object value with vuex v-model

I'm coordinating input elements with the keys of an object on Vuex state. Let's say I've got this object:
myObj: { foo: 1, bar: 2 }
And a computed property in a component:
myObjVals: {
get(){ return this.$store.state.myObj },
set(//?) { //? },
},
In the template, I can get values from the store:
<input type="number" v-model="myObjVals['foo']"/> // displays "1"
<input type="number" v-model="myObjVals['bar']"/> // displays "2"
But when I adjust the value on an input, I get the error: "Do not mutate vuex store state outside mutation handlers."
One obvious solution here is to have a different computed property for each key in myObj... but for larger objects, this gets repetitious/cumbersome. I am wondering if there is any way to code this as I am attempting to above, that is, using only one computed property to reference the object for both get and set functions in v-model.

Come to think of your problem once more. One solution could be something suggested here: https://vuex.vuejs.org/guide/forms.html
<input type="number" :value="myObjVals['foo']" #input="changeMyObj('foo', $event)"/> // displays "1"
<input type="number" :value="myObjVals['bar']" #input="changeMyObj('bar', $event)"/> // displays "2"
with computed property and a method:
computed: {
myObjVals: function () {
return this.$store.state.myObj
}
},
methods: {
changeMyObj(key, evt) {
this.$store.commit('changeMyObj', {key: key, value: evt.data})
}
}
With a mutation inside the store:
mutations: {
changeMyObj(state, objInput) {
state.myObj[objInput.key] = objInput.value
}
}
Here is a "working" fiddle: http://jsfiddle.net/zfab6tzp/346/
Not sure if this is the best solution possible, but it seems to be working

Vue.js bind object properties

Why I can't bind the object properties in Vue? The object addr is not reactive immediately, but test is reactive, how come? In this case, how should I bind it?
HTML
<div id="app">
<input type="text" id="contactNum" v-model="addr.contactNum" name="contactNum">
<input type="text" id="test" v-model="test" name="test">
<br/>
{{addr}}<br/>
{{addr.contactNum}}<br/>
{{test}}
</div>
Javascript
var vm = new Vue({
el: '#app',
data: {
addr: {},
test: ""
}
});
Jsfiddle

During initialisation Vue sets up getters and setters for every known property. Since contactNum isn't initially set up, Vue doesn't know about that property and can not update it properly. This can be easly fixed by adding contactNum to your addr object.
var vm = new Vue({
el: '#app',
data: {
addr: {
contactNum: "" // <-- this one
},
test: ""
}
});
The above is called reactivity in Vue. Since Vue doesn't support adding properties dynamically to its reactivity system, we may need some kind of workaround. A possible solution is provided by the API. In case of dynamically added properties we can use Vue.set(vm.someObject, 'b', 2).
Doing so the markup would need to get some update. Instead of using v-model it'd be better to use an event listener like #input. In this case our markup could look like this.
<input type="text" id="contactNum" #input="update(addr, 'contactNum', $event)" name="contactNum">
So basically the function will get triggered every time the input elements value changes. Obviously doing so will also require some adjustments on the JS part.
var vm = new Vue({
el: '#app',
data: {
addr: {},
test: ""
},
methods: {
update: function(obj, prop, event) {
Vue.set(obj, prop, event.target.value);
}
}
});
Since Vue triggers Vue.set() on any reactive element, we simply call it on our own because Vue doesn't recognizes a dynamically added property as a reactive one. Of course, this is only one possible solution and there may be lots of other workarounds. A fully working example can be seen here.

As per my comments, there are several things that you want to consider:
The reason why your code is not working is due to the inherent inability of JS to watch for changes in object properties. This means that even though addr is reactive, any properties added to addr that is not done when it is declared will make it non-reactive. Refer to the VueJS docs for more details: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
If you are going to have an arbitrary number of input fields, you are probably better of composing a custom input component, and simply use v-for to iteratively inject input fields based on the number of input fields you have.
Now back to the second point, if you know what fields addr will have, you can simply declare it in your app. We create a new updateFormData method, which is called by the component:
data: {
addrFields: ['contactNum', ...],
addr: {},
test: ""
},
methods: {
updateFormData: function(id, value) {
this.$set(this.addr, id, value);
}
}
We can still store your form data in the addr object, which will be updated by the updateFormData method based on the received payload using .$set(). Now, we can then create a custom Vue component for your input element.
In the example below, the component will iterate through all your addrFields, and pass down the addrField as a prop using :id="addrField". We also want to make sure that we capture the custom-named updated event emitted from within the component.
<my-input
v-for="(addrField, i) in addrFields"
:key="i"
:id="addrField"
v-on:inputUpdated="updateFormData"></my-input>
The template can look something like the following. It simply uses the id prop for both its id, name, and placeholder attribute (the latter for easy identification in the demo). We bind the #change and #input events, forcing it to trigger the updated callback:
<script type="text/template" id="my-input">
<input
type="text"
:id="id"
:name="id"
:placeholder="id"
#input="updated"
#change="updated">
</script>
In the component logic, you let it know that it will receive id as a prop, and that it should emit an inputUpdated event using $.emit(). We attach the ID and value as payloads, so that we can inform the parent what has updated:
var myInput = Vue.component('my-input', {
template: '#my-input',
props: {
id: {
type: String
}
},
methods: {
updated: function() {
this.$emit('inputUpdated', this.id, this.$el.value);
}
}
});
With the code above, we have a working example. In this case, I have created an arbirary array of input fields: contactNum, a, b, and c:
var myInput = Vue.component('my-input', {
template: '#my-input',
props: {
id: {
type: String
}
},
methods: {
updated: function() {
this.$emit('updated', this.id, this.$el.value);
}
}
});
var vm = new Vue({
el: '#app',
data: {
addrFields: ['contactNum', 'a', 'b', 'c'],
addr: {},
test: ""
},
methods: {
updateFormData: function(id, value) {
this.$set(this.addr, id, value);
}
}
});
<script src="https://unpkg.com/vue#2.1.3/dist/vue.js"></script>
<div id="app">
<my-input
v-for="(addrField, i) in addrFields"
:key="i"
:id="addrField"
v-on:updated="updateFormData"></my-input>
<input type="text" id="test" v-model="test" name="test" placeholder="test">
<br/>
<strong>addr:</strong> {{addr}}<br/>
<strong>addr.contactNum:</strong> {{addr.contactNum}}<br />
<strong>test:</strong> {{test}}
</div>
<script type="text/template" id="my-input">
<input
type="text"
:id="id"
:name="id"
:placeholder="id"
#input="updated"
#change="updated">
</script>

Edit your Vue data with this since it's getter and setter methods are not set up. Also, check out Declarative Reactive Rendering on Vue docs here:
data: {
addr: {
contactNum: "" // <-- this one
},
test: ""
}