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
@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
I cannot understand you properly .I don't see any name.b in the feudal — Vamsi Krishna
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
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 Vamsi Krishna · Accepted Answer · 2017-12-16T11:37:11

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);
    }
}

Vuejs Input Binding with Additional Properties in Computed Property

1 Answers