时间戳

首页 > 解决方案 > 如何查看数组中的特定属性

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

问题描述

我想在数组中观看“clientFilter”

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

标签： javascriptvue.js

解决方案

这是 Terry 在评论中提出的一个工作示例，使用计算属性和 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>

推荐阅读