在 nuxtjs vuejs 中观看克隆输入

Question

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

这里可以使用'Deep'吗？

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>

Answer 1

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

因此您当前的组件将如下所示：

<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 文件夹中，这应该有效。如果您想让 AddressCode 组件位于不同的文件夹中，您应该更改第一个文件中的 import 语句。

在 nuxtjs vuejs 中观看克隆输入

watching cloned input in nuxtjs vuejs

vue.js

nuxtjs