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原始代码无效。

如文档所述，您应该改为创建一个组件。
（jsfiddle example here）

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

1 个答案: