Vue js将组件拥有的数据传递给组件拥有的方法

Question

尝试将 vue 组件的“数据”中的不同数组传递给同一 vue 组件中的方法。我试图这样做是为了让不同的变量受相同的方法影响，而不必为每个变量使用单独的方法。

尝试将变量作为参数传递给方法，但它没有按预期响应。似乎传递的变量是数据变量的副本，而不是实际值。我想这样做是为了允许在方法中修改数据，然后再显示在页面上

示例数据：

data () {
   return { 
      a: [],
      b: []
  }
}

我希望观察者如何工作：

a {
   this.method(this.a)
}

b {
   this.method(this.b)
}

方法：

method(value) {
   value.add(1)
}

当前结果是 a 和 b 不会改变

Answer 1

Watchers 必须是函数，你可以这样做：

  watch: {
    a: function(aNewValue) {
      this.method(aNewValue)
    }
  }

无论如何，如果您打算每次变量更改时都会触发另一个变量的更改，那么您应该使用计算属性。

Answer 2

更新：

根据您的 cmets，您似乎正在尝试在组件中重用一个方法来改变视图模型中的两个不同数组。

您可以创建一个获取集合、值和要运行的操作的方法。

注意：这可能最终会使您的 html 绑定有点混乱，因为您需要有类似的东西：

<button type="button" @click="this.mutate(a, 'a', (c, v) => c.push(v))">Add to a</button>

这是一个示例 sn-p，其中使用共享方法对数组进行变异和过滤。我添加了包装器方法以保持 html 绑定干净（最终方法数量相同但重复更少）。

Vue.component('some-component', {
   template: `
   <div>
     <div>a: {{a}}</div>
     <div>b: {{b}}</div>
     <button type="button" @click="onAdd(a, 'a')">Add to a</button>
     <button type="button" @click="onSplice(a, 1)">Splice a</button>
     <br>
     <button type="button" @click="onAdd(b, 'b')">Add to b</button>
     <button type="button" @click="onSplice(b, 1)">Splice b</button>
   </div>
   `,
   data:() => ({ a: [], b: [] }),
   methods: {
       mutate(collection, value, callback){
          callback(collection, value);
       },
       onAdd(collection, value) {
           this.mutate(collection, value, (c, v) => c.push(v));
       },
       onSplice(collection, value) {
            this.mutate(collection, value, (c, v) => c.splice(0, value));
       }
   }
})

new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <some-component></some-component>
</div>