VUEJS输入绑定在计算属性中具有其他属性

我在vuex商店中有一些数据。我将这些数据加载到计算属性中，并基于某种条件，将更多数据添加到计算属性的数据中。然后，我想用它来填充表单。表格将具有所有属性，包括新添加的属性。现在，我希望用户能够更改表单中的值并将其提交给存储。但是，由于计算属性发生的一切都发生了，因此用户输入更改无法反映。寻找帮助...

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/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>

设置条件以检查是否要添加额外的属性。

基于该条件，提交一个突变，将新属性添加到您的商店状态

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

在您的商店中添加了这样的突变

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

相关内容

最新更新

热门标签：