如何将动态数据放入数组并将其附加到 dom vue.js答案

【问题标题】：how to get dynamic data into array and append it to dom vue.js如何将动态数据放入数组并将其附加到 dom vue.js
【发布时间】：2017-02-05 08:23:46
【问题描述】：

我想附加我点击的数据，但我得到了与未定义相同的输出。

<template>
<aside> 
    <ul>
        <li v-for="link in links" > </li>
           <button @click="tabLinks" v-text="link.textName" >  </button>
        </li>
    </ul>
</aside>
</template>

这是我的脚本文件

export default {
    data(){
        return {
         links : [
            {textName: 'Link 1',icon: 'fa-user fa'},
            {textName: 'link 2',icon: 'fa-search fa'},
            {textName: 'link 3',icon: 'fa-thrash fa'}
            ],
        }
    },
    methods: {
        tabLinks(){
            this.links.push({textName: this.textName  })
        }
    }
}

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您的代码中几乎没有错误。

例如在方法tabLinks中，你正在推送一个对象，但this.textName没有传递，当你点击那个按钮时它不会自动传递，一个选项可以是在方法中传递它。

在您的 HTML 中，您已关闭 </li> 两次。

你可以在这里看到这些纠正和工作代码：https://fiddle.jshell.net/mimani/x6ndwj8u/1/

修改后的 HTML：

<ul>
  <li v-for="link in links">
    <button @click="tabLinks(link.textName)">{{link.textName}}</button>
  </li>
</ul>

更新方法：

  methods: {
    tabLinks(textName) {
      this.links.push({
        textName: textName
      })
    }
  }

【讨论】：

【解决方案2】：

您的 html 结构不正确。有一个多余的</li>标签

<aside> 
    <ul>
        <li v-for="link in links" > </li> <-- remove this
           <button @click="tabLinks" v-text="link.textName" >  </button>
        </li>
    </ul>
</aside>

这也行不通

this.links.push({ textName: this.textName  })

因为没有this.textName。我不确定您要做什么，也许您想将参数传递给您的 tabLinks 方法。

【讨论】：