Question

我要观看数组中的“ clientFilter”

TableProduit：[ { nr_commande：0， date_creation：“”， id_delegue：“ 1”， clientFilter：“”}
]

Answer 1

这是Terry在评论中使用a computed property and a watcher提出的一个可行示例。这总是从TableProduit数组中的第一个元素读取/写入-您可能需要使用Array.prototype.find()才能获得具有clientFilter属性的正确对象，具体取决于您的需求，但尚不清楚您要从问题中真正实现什么。

在输入字段中键入以更改clientFilter属性，并查看观察者触发的控制台消息。

new Vue({
  el: '#app',
  template: `<input type="text" v-model:value="TableProduit[0].clientFilter" />`,
  data: {
    TableProduit: [{
      nr_commande: 0,
      date_creation: "",
      id_delegue: "1",
      clientFilter: ""
    }],
  },
  computed: {
    clientFilter: {
      get: function() {
        return this.TableProduit[0].clientFilter;
      },
      set: function(newValue) {
        this.TableProduit[0].clientFilter = newValue;
      }
    }
  },
  watch: {
    clientFilter: function(newValue) {
      console.log(`clientFilter changed to "${newValue}"`);
    }
  }
});
Vue.config.productionTip = false;

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

如何查看数组中的特定属性

1 个答案: