1

我在观看克隆输入时遇到问题
如何查看每个客户端的每个输入内部的任何变化

可以在这里使用“深度”吗？

ClientsForm.vue

<template>
 <div v-for="(client, index) as clients" :key="index">
  ~ 
  <input v-model="client.address.code">
 </div>
</template>
<script>
 export default{
 ~
 data (){
  return{
   ~
   clients: json.parse(json.stringify(this.$store.getters['STATE']))
  }
 },
 methods: {
  clone(){
   this.clients.push({
    ~
    address: {
     code: ""
    }
   })
  }
 }
 watch: {
  'client.address.code': function(oldVal, newVal){
    //things todo
  }
 }
}
</script>
4

1 回答 1

0

就未来调试和整体简单性而言，最好的解决方案是为输入创建一个组件，以便分别观察每个输入的变化。

所以你当前的组件看起来像这样：

<template>
 <div v-for="(client, index) as clients" :key="index">
  <AddressCode :code="client.address.code" />
 </div>
</template>

<script>
import AddressCode from '@/components/AddressCode.vue'

export default {
  components: {
    AddressCode
  },
  data (){
  return{
   ~
   clients: json.parse(json.stringify(this.$store.getters['STATE']))
  }
 },
 methods: {
  clone(){
   this.clients.push({
    ~
    address: {
     code: ""
    }
   })
  }
 }
}
</script>

文件（新组件的AddressCode.vue文件）看起来像这样：

<template>
  <div>
    <input v-model="code">
  </div>
</template>

<script>
export default {
  props: ['code'],
  watch: {
    code (oldVal, newVal) {
      // todos
    }
  }
}
</script>

请记住，如果AddressCode.vue文件位于components文件夹中，这应该可以工作。import如果您想让您的AddressCode组件位于不同的文件夹中，您应该更改第一个文件中的语句。

于 2020-08-17T12:10:21.087 回答