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

Question

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

<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  })
        }
    }
}

Answer 1

您的 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 方法。

Answer 2

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

例如在方法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
      })
    }
  }

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

how to get dynamic data into array and append it to dom vue.js

javascript

vue.js

vue-component

vuejs2