Question

我有一个名为 categories 的数组，并且将其作为按钮进行了循环。我已经尝试了几个小时才能找到一种处理JSON的方法：


    categories: [
        {
            name: 'Plan',
            values: ['Idea Generation','Naming','Revenue Models','Mockups & Wireframing','Presentation','Team Building']
        },
        {
            name: 'Design',
            values: ['Outsourcing','Logo','Graphics','Templates','UI/UX']
        },
        {
            name: 'Develop', 
            values: ['Hosting','Domain Names','Development','MVP','Payments','Product Demo','Templates']
        },
        {
            name: 'Market', 
            values: ['SNS','Press','Blog','Market Research','Forms & Survey','Analytics','A/B Testing','Advertising']
        },
        {
            name: 'Manage', 
            values: ['Hiring','Project Management','Funding','Legal','Finance','Feedback','Collaboration & Communication','Customer Support','Productivity','Investor Relations']
        },
        {
            name: 'ETC',
            values: ['Articles','Blogs','Learning']
        }
    ]

查看此图片： https://imgur.com/VLo5cBW

我想实现的是与上面的json数据相同。例如：当我单击 Plan 下的Idea Generation按钮时，它将创建一个这样的数组：


    selected_category: [
        {
            name: "Plan",
            value: ["Idea Generation"]
        }
    ]

因此，如果我单击Mockups & Wireframing之类的“ 计划”类别下的另一个按钮，它将在对象的同一name上添加：


    selected_category: [
        {
            name: "Plan",
            value: ["Idea Generation", "Mockups & Wireframing"]
        }
    ]

但是，如果当我再次单击但又选择了不同类别的设计时，它将是这样的：


    selected_category: [
        {
            name: "Plan",
            value: ["Idea Generation", "Mockups & Wireframing"]
        },
        {
            name: "Design",
            value: ["Outsourcing"]
        }
    ]

我对构造数组对象数据不熟悉，因此在这里需要帮助。

Answer 1

您要做的是使用vue的v-on属性（@click）调用一个具有您的逻辑的方法，该方法会将其添加到看起来像这样的数组中

<button @click(addToSelectedItems(data.name, data.value)>Click me </button>

addToSelectedItems(name, value){
    var index = selected_category.findIndex(c => c.name == name);
    if (index === -1) {
        selected_category.push({
            name: name,
            value: value,
        });
    }
    selected_category[index].value.push(value);

}

语法可能不正确，但这是一个粗略的主意

如何创建数组对象并将相同的对象值推入数组

1 个答案: