Vue.js

Question

我有两个组件：父组件和子组件。 Parent 有一个 cars 的数组，Child 应该将对象推送到 cars 数组。我的问题是我的 Child 组件将 cars 变成一个对象，而不是将一个对象推入 cars 数组。我的父组件：

<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 {
    methods: {
        addCar() {
            this.$emit("input", { model: "some car model" })
        }
    }
}

预期结果：

cars 得到更新并变为 [{ model: "some car model"}, { model: "some car model"}, etc...]

实际结果：

cars成为对象{model: "some car model"}

这是我的 fiddle:

https://jsfiddle.net/t121ufk5/529/

我假设我在我的子组件上使用 v-model 的方式有问题 and/or 我发出的方式不正确。有人可以帮忙吗？提前致谢！

Answer 1

让我们讨论一下，为什么你不正确result.Then我们讨论解决这个问题的其他方法。

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

当使用文本input（包括email、number等类型）或textarea时，v-model="varName"等同于:value="varName" @input="e => varName = e.target.value"。这意味着输入的值设置为 varName 每次更新输入 varName 后更新为输入的值。一个普通的 select 元素也会这样，尽管多个 select 会有所不同。

现在我们要明白，

v-model 如何处理组件？

由于 Vue 不知道您的组件应该如何工作，或者如果它试图替代某种类型的输入，它会以相同的方式对待所有组件 v-model。它实际上与文本输入的工作方式完全相同，除了在事件处理程序中，它不期望将事件 object 传递给它，而是期望将值直接传递给它.所以……

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

...与...相同

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

所以当你应用这个方法的时候。您必须收到 value 作为道具。并确保你的 $emit 名字是 input.

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

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

当您 $emit 获得新值时。此 newValue 将更新您要更新的 parent 值。

这是您的代码 this.$emit("input", { model: "some car model" })。

您将 parent 值更新为 object。所以你的 Array 更新为 Object.

让我们解决全部问题。

Parent 分量： `

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

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

`

Child 分量：

<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"}))
        }
    }
}

您实际上可以通过多种方式解决它。

第二种方法，

Parent:

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

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

Child:

<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" })
        }
    }
}

最后一个方法：

Parent:

    <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" })
      }
   }
}

Child:

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

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

Answer 2

props

可以触发更新传输值的事件

在父级

<my-component :is-open.sync="isOpen" />

在我的组件中

this.$emit('update:isOpen', true)

Vue.js - 发出更新数组不起作用

Vue.js - emit to update array not working

javascript

emit