Question

我的vuex商店里有一些数据。我在计算属性中加载该数据，并根据某些条件，我将更多的数据添加到计算属性的数据。然后我想用它来填充表格。表单将包含所有属性，包括新添加的属性。现在我希望用户能够更改表单中的值并将其提交回商店。但是，由于所有内容都来自Computed属性，因此用户输入更改不会反映出来。寻求帮助......

<!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>

Answer 1

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

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

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

在您的商店

添加这样的突变

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

Vuejs输入绑定与计算属性中的其他属性

1 个答案: