Vuejs Input Binding with Additional Properties in Computed Property

Question

I have some data in my vuex store. I am loading that data in a computed property and based on some condition, I am adding some more data to the computed property's data. then I want to use this to populate a form. The form will have all properties including the newly added property. Now I want the user be able to change values in the form and submit it back to store. However, since everything is happening from Computed property, the user input changes don't reflect. Looking for help...

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue Input Computed Example</title>
</head>
<body>
  <div id="app" class="container-fluid">
    <h2>Vue Input Computed Example</h2>
    <!-- I want a form here which is filled with the film data. The idea is that user will update 
    the data and add data to the newly created properties and then submit form. -->
   <input type="text" v-model="item.a"/>
    <br /><br />
   <input type="text" v-model="item.b"/>
    <br /><br />
   <input type="text" v-model="item.c"/>
    <br /><br />
    from computed property 'film': {{film}}
    <br /><br />
    from data: {{item}}
  </div>
  <script>  
    new Vue({
      el: '#app',
      data: function() {
        return {
            item: {
                a:'',
                b:''
            }
        }
      },
      computed: {
        film () {
          var filmdata = {a:'1',b:'2'} // This actually comes from the Vuex store.
          // Next based on some condition, I want to add an additional property
          // I don't know how to send this to 'item' above. I don't want 'item' to have this additional 
          // property by default. Add it only if condition satisfies
          if (1 == 1) {
            filmdata.c = ''
          }
          return filmdata
        }
      }
    });
  </script>
</body>
</html>

Looks like this is what you want: stackoverflow.com/a/44456784/7814783 — Vamsi Krishna
– Vamsi Krishna, Commented Dec 16, 2017 at 10:33
@VamsiKrishna This actually works. However, the challenge is that when I add the new field filmdata.c = '', the change in value in the form still doesn't reflect. You can see the problem here. name.b doesn't update. jsfiddle.net/zhu53kfz Note that I don't want the original state to have the b property. — asanas
– asanas, Commented Dec 16, 2017 at 10:54
I cannot understand you properly .I don't see any name.b in the feudal — Vamsi Krishna
– Vamsi Krishna, Commented Dec 16, 2017 at 11:08
Can you see this updated fiddle. jsfiddle.net/ygfhaxow/2 You will see that I am adding a new property data.b under get() — asanas
– asanas, Commented Dec 16, 2017 at 11:10
for the properties to be reactive you should set the properties before hand at the time of initialisationlike this jsfiddle.net/ygfhaxow/3 see vuejs.org/v2/guide/reactivity.html — Vamsi Krishna
– Vamsi Krishna, Commented Dec 16, 2017 at 11:23

Vamsi Krishna · Accepted Answer · 2017-12-16 11:37:11Z

1

set up a condition to check if you want to add an extra property or not.

based on that condition commit a mutation which adds a new property to your stores state

if(condition){
    this.$store.commit('addPropertyToStore', {name: 'b', value:'xyz'});x
}

in your store add a mutation like this

mutationss:{
    addPropertyToStore(state, prop){
        Vue.set(state, prop.name, prop.value);
    }
}

answered Dec 16, 2017 at 11:37

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

asanas Over a year ago

Yes!! Thanks so much, this is what I was looking for. Still one doubt. I should be setting this condition in my computed property's setter, right?

Vamsi Krishna Over a year ago

@asanas no in the created hook check whether the property is there or not

asanas Over a year ago

I am using Nuxt. My page works something like this: 1) Use the fetch method to fetch data from an api and add it to store. 2) Get this data from store into the page in a Computed Property. 3) Once the data is there in Computed property, only then I will be able to check for the property. What should I do in this case?

Vamsi Krishna Over a year ago

@asanas sry it's better you open in your question could not understand you completely and there are many moving parts

asanas Over a year ago

sorry for the confusion. Your solution is right. I think I just need to figure where to commit the mutation from. Thanks for helping!

Collectives™ on Stack Overflow

Vuejs Input Binding with Additional Properties in Computed Property

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related