Question

我有两个部分，父母和孩子两个部分，
父数据属性我已经像这样设置了它...

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

通过单击按钮填充用户数组，我与子组件共享此数组。子组件正在尝试将一个用户添加到这个有效的列表中（将值添加到传递给props中），但是由于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>

Answer 1

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

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

在父级中：

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

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

Answer 2

看起来我很失踪

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

阻止我的页面刷新

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

2 个答案: