从子组件添加到数组项的模式答案

【问题标题】：pattern to add to array item from child component从子组件添加到数组项的模式
【发布时间】：2019-03-22 14:49:12
【问题描述】：

我有两个组件，一个父组件和一个子组件，
父数据属性我是这样设置的...

data () {
    return {
      users: [],
    }
 }

用户数组通过单击按钮填充，我与子组件共享此数组。子组件正在尝试将用户添加到这个有效的列表中（为传入的道具添加值），但是由于用户数组是在数据下声明的，父组件刷新并且我失去了我的用户...... 是否有一种模式可以保留用户数组值并通过子元素添加到它们...

对不起，如果这很明显，但正如我所说，我才刚刚开始......

编辑：添加代码（父组件）

<template>
  <div id="app">
    <div>
      <button v-on:click="display()">Display users</button>
      <button v-on:click="displaySingleUserInput = 
           !displaySingleUserInput">Add user</button>
      <div>
    </div>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
    </div>

    <add-user v-on:submit_user="addUser" v-show="displaySingleUserInput"></add-user>
    <user-list v-bind:users="users"></user-list>             
</div>

</template>

<script>
import axios from 'axios';
import UserList from './components/UserList';
import AddUser from './components/AddUser';

export default {
  components: {
    'user-list': UserList,
    'add-user': AddUser
  },
  name: 'app',
  data () {
    return {
      users: [],
      errors: [],
      displaySingleUserInput: false
    }
  }, 
  methods: {
    display: function(string) 
    {
      axios.get(`users.json`)
        .then(response => {
          // JSON responses are automatically parsed.
          this.users = response.data.users
      })
      .catch(e => {
        this.errors.push(e)
      })
    },
    addUser: function(id) {
      this.users.push({firstname: "john", lastName: 'jones'})
        },
  }
}
</script>

子组件

<template>
    <div id="singleUserAdd">
      <form id=addUser aria-label="single user add">
        <button v-on:click="submit()">Submit</button>
        <button>Cancel</button>
      </form>
    </div>

</template>

<script>

export default {
  data() {
    return {
    }
  },
  methods: {
    submit: function() {
          this.$emit('submit_user', 1)
        }    
  }
}
</script>

【问题讨论】：

标签： javascript vue.js vuejs2 axios vue-component

【解决方案1】：

我假设您的子组件中有一个名为 addUser 的方法：

   addUser(){
     this.$emit("addusr",this.newuser);
    }

在父级中：

   <child-comp @addusr="addNewUser" />

    ...
   addNewUser(newuser){
        this.users.push(newuser);
     }

【讨论】：

【解决方案2】：

我好像不见了

<form v-on:submit.prevent="onSubmit"

阻止我的页面刷新

【讨论】：