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

更新：

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

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

注意：这可能最终会使您的html绑定有些混乱，因为您需要输入以下内容：

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

这是一个示例代码段，其中使用了一种共享方法来变异和过滤数组。我添加了包装器方法以保持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>

Answer 2

观察者必须是函数，您可以执行以下操作：

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

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

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

2 个答案: