在 VUEJS 中添加动态 li 元素并删除相应的元素

Question

我是 VUE JS 的新手。

我有一个表格，我想在其中添加多种媒体。 因此，在单击“添加媒体”按钮时，我想添加带有相应 html 内容的“li”标签，其中我也有删除按钮。

点击删除按钮我想删除相应的 li。

最好的方法是什么？

这是我到目前为止所做的事情

HTML：

<div class="col-md-10">
                          <button @click="addMediaRow()" class="btn btn-primary" :disabled="mediaRowCount >= 3" type="button">Add Media</button>
                          <br>
                          <br>
                            <ul style="list-style-type: none; padding: 0;" id="project_media_ul">
                                <li v-for="(row, index) in mediaRowArr">
                                  <span v-html="row.template"></span>
                                </li>
                            </ul>
                        </div>

JS

在数据中我声明了变量

mediaRowLI: '<a v-on:click="openMediaFileInput"><i class="fa fa-camera fa-2x"></i>&nbsp;\n' +
    '                                        <span class="photospan">Add Photo </span></a>\n' +
    '                                    or Input Video URL here : <input type="text" class="form-control"\n' +
    '                                                                     placeholder="use embed URL, e.g. www.youtube.com/embed/EXa9ZeqRKl8"\n' +
    '                                                                     name="media_video_url" style=" width: 50%">\n' +
    '                                    \n' +
    '                                    <a href="javascript:void(0)" class="btn-danger" v-on:click="removeMediaRow"><i class="fa fa-close"></i></a>\n' +
    '\n' +
    '                                    <input multiple type="file" accept=\'image/x-png,image/jpeg\' name="media_images"\n' +
    '                                           style="visibility: hidden;">\n' +
    ''

方法：

addMediaRow () {
    this.mediaRowArr.push({
      template: this.mediaRowLI
    })
  },
  removeMediaRow (key) {
    this.mediaRowArr.splice(key, 1)
  },

提前致谢

Answer 1

请注意：

你不能使用v-html 来编写模板部分，因为 Vue 是 不是基于字符串的模板引擎。相反，组件是 首选作为 UI 重用和组合的基本单元。
(source)

表示带有v-on:click="removeMediaRow" 的html raw 不起作用。

正如文档所述，您应该创建一个组件。
(jsfiddle example here)