undefinedfix
Sign in

vue.js How to trigger the event bound by the dynamically added button?

pramys edited in Wed, 29 Jun 2022

How to trigger the event bound by the dynamically added button? Ask experts to help, thank you! The code is as follows:

<template>
    <div>
        <Form
            :label-width="120"
            label-position="right"
        >
            <FormItem label="输入参数:">
                <div
                    v-html="item"
                    v-for="(item,index) in list"
                >
                    {{item}}
                </div>
            </FormItem>
        </Form>
    </div>
</template>
</FormItem>
<script lang="ts">
import { CreateElement } from "vue";
import { Vue, Component, Watch } from "vue-property-decorator";
import Axios, { AxiosResponse, AxiosError } from "axios";
import VueRouter from "vue-router";
import moment from "moment";
import _ from "lodash";
@Component
export default class Page extends Vue {

  list: any = [
    '<Input v-model="inputParams" placeholder="" style="width: 800px;"></Input>
    <Button type="info" style="margin-left:10px;"  v-on:click="addParams">添加参数</Button>'
  ];
  html = "";
  addParams() {
    this.list.push(
      "<br/><Input v-model='inputParams' placeholder=''  style='width: 800px;'></Input>
      <Button type='info' style='margin-left:10px;' @click.sync='remove($event)'>删除</Button>"
    );
  }
</script>

Because you didn't understand what I wanted to express, I put the picture up for you to understand

Click Add parameter, and a text box and a delete button will be added dynamically. Now I don't know how to dynamically bind an event to delete. Some people on the Internet say v-on: click, others say v-on: [email protected] click.sync After I tried, I couldn't trigger the deletion event. Thank you!

5 Replies
Mux
commented on Wed, 29 Jun 2022

Each time the DOM is generated dynamically, a custom attribute is bound to the delete button, which is data related and unique.

Delete any trigger event. After binding, pass the custom attribute in. When processing data, use the custom attribute to find the data, delete it, and delete the corresponding dom

user618075
commented on Wed, 29 Jun 2022

To be honest, I don't understand your code very well. You encapsulate two buttons into components, and then you want to distinguish which button is used. For example, if there is a list with many "add", you should send parameters (such as ID) to the click event to show which button it is

SunZYTech
commented on Wed, 29 Jun 2022

Pro, what do you mean by dynamic binding events? Does it mean that each delete button is bound with a different event, or does it mean that each delete button is bound with an event?

user6105302
commented on Thu, 30 Jun 2022

Here, the delete button and input box should be in a component. Click add in the parent component. Click delete from the component to trigger the parent component event to delete

Frank
commented on Thu, 30 Jun 2022

I finally understand how to do, thank you for your attention!

lock This question has been locked and the reply function has been disabled.