Vue.js emit更新数组不起作用

让我们来讨论一下，为什么你得不到合适的结果.然后我们讨论了解决这个问题的其他方法.

首先，我们需要了解默认情况下v-model如何在自定义组件上工作.

当使用文本input(包括email、number等类型)或textarea时，v-model="varName"相当于:value="varName" @input="e => varName = e.target.value".这意味着在输入varName的每次更新被更新为输入的值之后，输入的值被设置为varName.一个普通的 Select 元素也会这样做，尽管多重 Select 是不同的.

现在我们需要理解，

How Does v-model Work On Components?

由于Vue不知道您的组件应该如何工作，或者如果它试图充当某种类型输入的替代品，那么它对v-model个组件都一视同仁.它实际上与文本输入的工作方式完全相同，只是在事件处理程序中，它不希望事件对象传递给它，而是希望值直接传递给它.所以…

<my-custom-component v-model="myProperty" />

…和…是一样的…

<my-custom-component :value="myProperty" @input="val => myProperty = val" />

所以当你运用这种方法时.你必须得到value作为props .确保你的名字是input.

现在你可以问我，你做错了什么？

好的，看看代码@input="val => myProperty = val"

当你输入一个新值时.这newValue将更新您想要更新的父值.

这是你的密码this.$emit("input", { model: "some car model" }).

使用对象更新父值.所以你的Array更新为Object.

让我们来解决全部问题.

父组件:

<template>
   <child v-model="cars"></child>
    <ul>
      <li v-for="car in cars">
         {{ car.model }}
      </li>
    </ul>
</template>

export default {
 data: function() {
  return {
    cars: []
  }
 }
}

`

子组件:

<template>
    <div>
        <button type="button" @click="addCar()">Add Car</button>
    </div>
</template>

export default {
    props: ['value']
    methods: {
        addCar() {
            this.$emit("input", this.value.concat({model: "some car model"}))
        }
    }
}

实际上，你可以用几种方法来解决这个问题.

第二种方法，

起源:

<template>
   <child :cars="cars"></child>
    <ul>
      <li v-for="car in cars">
         {{ car.model }}
      </li>
    </ul>
</template>

export default {
 data: function() {
  return {
    cars: []
  }
 }
}

子元素:

<template>
    <div>
        <button type="button" @click="addCar">Add Car</button>
    </div>
</template>

export default {
    props: {
       cars: {
          type: Array,
          default:[]
       }
    },
    methods: {
        addCar() {
            this.cars.push({ model: "some car model" })
        }
    }
}

最后一种方法:

起源:

    <template>
        <child @update="addCar"></child>
            <ul>
                <li v-for="car in cars">
                    {{ car.model }}
                </li>
            </ul>
    </template>

    export default {
        data() {
            return {
                cars: []
            }
        }
   },
   methods: {
      addCar() {
           this.cars.push({ model: "some car model" })
      }
   }
}

子元素:

 <template>
     <div>
        <button type="button" @click="update">Add Car</button>
     </div>
    </template>

    export default {
        methods: {
            update() {
                this.$emit('update')
            }
        }
    }