Vue.Js - 将数据添加到数组并分配给道具（帮助）答案

【问题标题】：Vue.Js - Add data to an array and assigning to the props (help)Vue.Js - 将数据添加到数组并分配给道具（帮助）
【发布时间】：2017-06-14 10:46:46
【问题描述】：

我有一个问题，我想让我的组件可以为每个用户单击添加按钮的项目添加新的侧边栏菜单项。所以基本上我的组件应该在用户定义自己的侧边栏菜单项时出现。

这是我写的 vue js 代码：

Vue.component('sb-menu-item', {
   props: ['attrib'],
   template: '<a class="item"><i  class="{{attrib.icon}} icon"></i>{{attrib.name}}</a>'
});

new Vue({
    el: '#sb-list',
    data: {
        itemsProp: [{icon: 'calendar icon', name: 'history'}],
        newItems: [{icon: '', name: ''}]
    },
    methods: {
        addItem: function (){
            this.itemsProp.push({icon: this.newItems.icon, name: this.newItems.name});
            // this.itemsProp.name.push(this.attrib.name);
            this.newItems = [];
        },
        delItem: function (){
            this.itemsProp.pop();
        }
    }
});

 <div class="ui top attached menu">
        <a class="item">
            <i class="sidebar icon"></i>
            <i class="right chevron icon"></i>
            Menu
        </a>
    </div>
    <div class="ui bottom attached segment pushable" id="sb-list">
        <div class="ui visible left vertical sidebar menu" >
            <a class="item">
                <i class="home icon"></i>
                Dashboard
            </a>
            <a class="item">
                <i class="user icon"></i>
                Account
            </a>
            <sb-menu-item v-for="item in itemsProp" v-bind:attrib="item" v-model="itemsProp"></sb-menu-item>
        </div>
    <div class="pusher">
        <div class="ui basic teal segment">
            <h3 class="ui header">Insert New Sidebar Items</h3>
            <hr />
            <form class="ui tiny teal form compact raised padded segment">
                <div class="field">
                    <input type="text" placeholder="Item Name" v-model="newItems.name">
                </div>
                <div class="field">
                    <input type="text" placeholder="icon name" v-model="newItems.icon">
                </div>
                <button class="ui medium teal float button" v-on:click="addItem"><i class="cubes icon"></i>  Make It!</button>
                <button class="ui medium red float button" v-on:click="delItem"><i class="trash icon"></i>Pop Last Menu! Now!</button>
            </form>
            
            <p></p>
            <div class="ui medium teal raised padded segment">{{$data | json}}</div>
        </div>
    </div>
    </div>

此代码有效，但每次我单击添加按钮时，都会添加我从表单中定义的自己的侧边栏菜单项，然后这些项目会在几秒钟内消失。（虽然我正在使用语义用户界面）

抱歉我的英语和解释不好。我希望你能理解这一点，谢谢！

【问题讨论】：

你能添加sb-menu-item的代码吗，如果你能创建一个小提琴更好。

标签： html vue.js

【解决方案1】：

我发现了 2 个潜在问题。我稍后可能会尝试添加一个 jsFiddle。首先，我将创建newItem 和对象而不是数组。第二个问题是sb-menu-item 组件中的v-model。由于您已经通过attrib 属性发送了item，因此您不需要那里的v-model。

这是一个基于输入添加/删除内容的简单示例。 https://jsfiddle.net/z11fe07p/437/

另外请注意，如果您刷新页面，所有数据都会丢失，因为 vue 不是用于持久化数据的。

【讨论】：