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
Related
I'm working on a vue cli project where items have two state equipped and unequipped.
This State is controlled by a Boolean located in the Props. Since you can switch the state I had to create a data isEquipped set to false by default.
I then added a watcher but it doesn't change my data value if my props is set to True.
Here's the code
name: "Item",
props: {
Index : Number,
name: String,
desc : String,
bonus: Array,
equipped : Boolean
},
data() {
return {
isEquipped : false
}
},
watch: {
equipped: function(stateEquipped) {
this.isEquipped = stateEquipped;
},
},
So for instance let's say I created a new item with equipped set to True, the watcher doesn't trigger and isEquipped stays at False, is there any reason to that ?
I came across multiple similar questions like this one Vue #Watch not triggering on a boolean change but none of them helped me
If you want to use watch then you can try define it as:
equipped: {
handler () {
this.isEquipped = !this.isEquipped;
},
immediate: true
}
This will change the value of this.isEquipped whenever the value of equipped will change.
I am not sure what is the use case of isEquipped but seeing your code you can use the props directly unless there is a situation where you want to mutate the isEquipped that is not related to the props.
Why not just use a computed value instead?
{
// ...
computed: {
isEquipped () {
// loaded from the component's props
return this.equipped
}
}
}
You can then use isEquipped in your components just as if it was defined in your data() method. You could also just use equipped in your components directly as you don't transform it in any way.
<p>Am I equipped? - <b>{{ equipped }}</b></p>
Watchers are "slow" and they operate on vue's next life-cycle tick which can result in hard to debug reactivity problems.
There are cases where you need them, but if you find any other solution, that uses vue's reactivity system, you should consider using that one instead.
The solution using a computed value from #chvolkmann probably also works for you.
There is a imho better way to do this:
export default {
name: "Item",
props: {
Index : Number,
name: String,
desc : String,
bonus: Array,
equipped : Boolean
},
data() {
return {
isEquipped : false
}
},
updated () {
if (this.equipped !== this.isEquipped) {
this.isEquipped = this.equipped
// trigger "onEquip" event or whatever
}
}
}
The updated life-cycle hook is called -as the name suggests- when a component is updated.
You compare the (unchanged) isEquipped with the new equipped prop value and if they differ, you know that there was a change.
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!
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.
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: ""
}
I am converting a project from Angular to Web Components / Custom Elements and am trying to replace ng-model by creating a binding for the following text field:
<input type="search" class="form-control search_input" placeholder="Search for someone new" value$="[[userLookup:input]]" required autocomplete="off">
Obviously since this is converted from Angular, I need to be able to access this value in a JavaScript function:
(function(customElements) {
class RecentSearch extends PolymerMixins.LightDomMixin(Polymer.Element) {
static get is() { return 'recent-search'; }
static get properties() {
return {
properties: {
user: {
type: Object
},
userLookup: {
type: String,
reflectToAttribute: true,
value: '',
},
},
};
}
lookupUser() {
if (this.userlookup) {
$state.go('users', { query: userlookup });
}
};
}
customElements.define(RecentSearch.is, RecentSearch);
})(window.customElements);
How would I access the userLookup property (the one bound to the text field) from inside the lookupUser function?
You're already accessing userLookup correctly from lookupUser() with this.userLookup. The event handler's context (i.e., this) is the Polymer element instance.
However, your data binding is incorrectly a one-way data binding, so userLookup would not be updated. This kind of binding needs to be two-way (i.e., with curly brackets) and cannot use attribute binding (i.e., $=).
The correct usage should be something like this:
<input placeholder="Search for someone new"
value="{{userLookup::change}}" />
demo