What Am I missing?

[Lahirutech]

editor.DomComponents.addType("my-input-type", {
  attribute: "",
  isComponent: (el) => {
    console.log(el);
    return el.tagName === "BUTTON";
  },
  model: {
    defaults: {
      tagName: "button",
      droppable: false, // Can't drop other elements inside
      attributes: {
        // Default attributes
        type: "text",
        name: "default-name",
        placeholder: "Insert text here",
      },
      traits: ["name", "placeholder", { type: "checkbox", name: "required" }, {
        type: 'select',
        name: 'myprop1',
        changeProp: true,
        options: [
          { value: 'value1', name: 'Value 1' },
          { value: 'value2', name: 'Value 2' },
        ],
      },],
      // ...
      someprop: function () {
        console.log("lanka");
      },
    },
    init() {
      var attribute = "";
      this.on("change:attributes", this.handleAttrChange);
    },
handleAttrChange() {
      console.log("Attributes updated: ", this.getAttributes());
      this.attribute = this.getAttributes().name;
      //attribute = this.getAttributes().name;
      console.log(this.attribute);
    },
  },

  view: {
    events: {
      click: "clickme",
    },
    clickme() {
      console.log("Calling the api");
    },
    init({ model }) {
      // Do something in view on model property change
      this.listenTo(model, "change:prop", this.handlePropChange);

      // If you attach listeners on outside objects remember to unbind
      // them in `removed` function in order to avoid memory leaks
      // this.onDocClick = this.onDocClick.bind(this);
      // document.addEventListener("click", this.onDocClick);
    },
  },
});

I can set a custom value which is set from traits to var attribute( I have initialized it inside init() ). I use handleAttrChange function to do that. But
I want to access the vat attribute inside my clickme function. inside view so that I can create a dynamic click me function. What's the best way to do that.

[artf]

As you're defining the trait with changeProp: true changes are applied on the property level.

clickme() {
  const { model } = this; // take the model from the view
  const attrs = model.getAttributes(); // this will contain stuff like `name`, `placeholder`, etc.
  const myPropVal = model.get('myprop1'); // value for `myprop1` as it was defined with `changeProp: true`
},